center an image whatever the divice width is in ionic

Question

I'm using ionic and I want to center an image whatever the width of the device is, how can achieve that?

<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>

the css code of the image is :

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

this is the same as this question: http://stackoverflow.com/questions/7055393/center-image-using-text-align-center — Andrew, Oct 18 '16 at 10:06

score 1 · Accepted Answer · answered Oct 18 '16 at 10:08

Add margin: 0 auto; and display:block or display:table in css

.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>

center an image whatever the divice width is in ionic

1 Answers1