центр изображения, независимо от ширины линии в ионном

Question

Я использую ионный, и я хочу центрировать изображение независимо от ширины устройства, как это можно достичь?

<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

Добавить margin: 0 auto; и display:block или display:table в 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>