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

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

首先，我建议不要在表单布局中使用tables。推荐的方法是使用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>