无论设备宽度是 ionic 还是居中图像

Question

我正在使用 ionic，我想将图像居中，无论设备的宽度如何，如何实现？

<ion-content class="padding">
<div style="margin-top:13%;margin-bottom: 20%">
<div class="brading">
  <img src="img/logo.png" >
</div>

  <form style="margin-top: 2%" name="myForm" novalidate>
    <div class="list">

      <label class="item item-input" ng-class="{ 'has-errors' :myForm.username.$invalid, 'no-errors' : myForm.username.$valid}">
        <span class="input-label">Username</span>
        <input type="text" name="username" ng-model="authorization.username" ng-minlength="3" required>
      </label>
      <div class="padding">
        <span class="error" ng-show="myForm.username.$error.required"> <i class="ion-person"></i> Nom utilisateur est obligatoire</span>
        <span class="error" ng-show=" myForm.username.$error.minlength"><i class="ion-information-circled"></i> Veuillez saisir au moins 3 caractères</span>
      </div>
      <span us-spinner="{color: 'blue', radius:30, width:8, length: 16,top:100}" spinner-key="spinner-8"></span>
      <label class="item item-input" ng-class="{ 'has-errors' :myForm.password.$invalid, 'no-errors' : myForm.password.$valid}">
        <span class="input-label">Password</span>
        <input type="password" name="password" ng-model="authorization.password" ng-minlength="3" required>
      </label>
    </div>

    <div class="padding">
      <button type="button" class="button button-block button-positive" ng-disabled="myForm.$invalid "  ng-click="signIn(myForm)">Se connecter</button>
    </div>
  </form>

图片的css代码是：

 .brading{ max-width: 500px;  width: 50%;  margin: auto 15%;}

Answer 1

在css

中添加margin: 0 auto;和display:block或display:table

.brading{ max-width: 500px;  width: 50%;  margin: 0 auto; display:block;}

<ion-content class="padding">
<div style="margin-top:13%;margin-bottom: 20%">
<div class="brading">
  <img src="img/logo.png" >
</div>

  <form style="margin-top: 2%" name="myForm" novalidate>
    <div class="list">

      <label class="item item-input" ng-class="{ 'has-errors' :myForm.username.$invalid, 'no-errors' : myForm.username.$valid}">
        <span class="input-label">Username</span>
        <input type="text" name="username" ng-model="authorization.username" ng-minlength="3" required>
      </label>
      <div class="padding">
        <span class="error" ng-show="myForm.username.$error.required"> <i class="ion-person"></i> Nom utilisateur est obligatoire</span>
        <span class="error" ng-show=" myForm.username.$error.minlength"><i class="ion-information-circled"></i> Veuillez saisir au moins 3 caractères</span>
      </div>
      <span us-spinner="{color: 'blue', radius:30, width:8, length: 16,top:100}" spinner-key="spinner-8"></span>
      <label class="item item-input" ng-class="{ 'has-errors' :myForm.password.$invalid, 'no-errors' : myForm.password.$valid}">
        <span class="input-label">Password</span>
        <input type="password" name="password" ng-model="authorization.password" ng-minlength="3" required>
      </label>
    </div>

    <div class="padding">
      <button type="button" class="button button-block button-positive" ng-disabled="myForm.$invalid "  ng-click="signIn(myForm)">Se connecter</button>
    </div>
  </form>

无论设备宽度是 ionic 还是居中图像

center an image whatever the divice width is in ionic

css

width

angularjs

ionic-framework