居中一個圖像無論寬度是在離子

我正在使用離子，並且我想要居中一個圖像無論設備的寬度是什麼，如何能夠實現這一目標？居中一個圖像無論寬度是在離子

<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%;}

來源

2016-10-18 imsi imsi

使用餘量：汽車; –

這與這個問題是一樣的：http://stackoverflow.com/questions/7055393/center-image-using-text-align-center – Andrew

謝謝你ser ...對你的回答很好 –

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

來源

2016-10-18 10:08:16

謝謝你ser你的答案... –

居中一個圖像無論寬度是在離子

回答

相關問題