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?

Answer 1

First off, I'd recommend against using table s 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>