使用离子框架中心离子按钮

Question

这是我第一次使用Ionic框架。我想集中一个“离子按钮”，我该怎么做？这是我的看法：

这是我的html代码：

<ion-header> 
 
    <ion-navbar> 
 
    <button ion-button menuToggle> 
 
     <ion-icon name="menu"></ion-icon> 
 
    </button> 
 
    <ion-title>Login</ion-title> 
 
    </ion-navbar> 
 
</ion-header> 
 

 
<ion-content padding> 
 
    <h3>Effettua l'accesso</h3> 
 

 
    <p> 
 
    Esegui il login oppure procedi come utente non registrato. Clicca in alto a sinistra per vedere il menu. 
 
    </p> 
 

 
    <form ng-submit="submitLogin()"> 
 
    <tr> 
 
     <td>Email</td> 
 
     <td><input type="text" ng-model="prodescForm.description"/></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Password</td> 
 
     <td><input type="text" ng-model="prodescForm.registerDiscount" /></td>     
 
    </tr> 
 
    <button ion-button>Login</button> 
 
    </form> 
 
</ion-content>

注：我只是改变与侧边栏离子项目的 “page1.html”。 我如何居中这个按钮？

Answer 1

首先，我建议不要使用table s来布置表单。推荐的方法是使用div或类似的元素。

但是，如果您绝对要使用table，请务必正确使用它。这意味着要添加所有必要的table相关标签以使其成为有效的表格。在这种情况下，将其包装在<table>中应该足够了。

然后应用一些额外的CSS将按钮居中在表格行中。在下面的示例中，colspan='2'使列扩展了tr的整个宽度，然后是应用text-align: center的类。

table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
input { 
 
    width: 100%; 
 
} 
 

 
td.centered { 
 
    text-align: center; 
 
}

<form ng-submit="submitLogin()"> 
 
    <table> 
 
    <tr> 
 
     <td>Email</td> 
 
     <td> 
 
     <input type="text" ng-model="prodescForm.description" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Password</td> 
 
     <td> 
 
     <input type="text" ng-model="prodescForm.registerDiscount" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2" class='centered'> 
 
     <button ion-button>Login</button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>