Center a ion-button using Ionic framework

Question

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

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?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

Center a ion-button using Ionic framework

Sign up