Alfonso Silvestri Alfonso Silvestri - 4 years ago 222
CSS Question

Center a ion-button using Ionic framework

It's my first time with Ionic framework. I want to center a "ion-button", how I can do it? This is my view:

enter image description here

This is my html code:



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





note: I just changed "page1.html" of a ionic project with sidebar.
How I can center this button?

Answer Source

First off, I'd recommend against using tables for the layout of your form. The recommended way to do this would be with div or similar elements.

However, if you absolutely want to use a table, be sure to use it correctly. This would mean adding all the necessary table-related tags to make it a valid table. In this case wrapping it in a <table> should be enough.

Then apply some additional CSS to center the button in a table row. In the example below a colspan='2' to make the column extend the full width of the tr, then a class which applied a 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download