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

Question

这是我第一次使用Ionic框架。我想把一个＆＃34;离子按钮＆＃34;放在中心，我该怎么做？这是我的观点：

这是我的HTML代码：

＆＃13;

＆＃13;

  name x       y          z
1 sp1  2       4          2
2 sp2  ca.4,5  ca.8,10    ca.4,5
3 sp3  1,1,5   2,2,10     1,1,5
4 sp4  3       6          3  

＆＃13;

＆＃13;

＆＃13;

注意：我刚刚更改了＆＃34; page1.html＆＃34;带有侧边栏的离子项目。 我如何将这个按钮居中？

Answer 1

首先，我建议不要使用table来表示表单的布局。建议的方法是使用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>