イオンフレームを使用してイオンボタンを中心にする

Question

イオンフレームワークで初めてのことです。私は "イオンボタン"を中心にしたい、どうすればいいの？これが私の見解です：

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

注：

これは私のhtmlコードである私は、サイドバーとイオンプロジェクトの "page1.html" に変更しました。 どのようにこのボタンを中央に置くことができますか？

Answer 1

まず、フォームのレイアウトにtableを使用することをお勧めします。これを行うには、divまたは類似の要素を使用することをお勧めします。

ただし、絶対にtableを使用する場合は、正しく使用してください。これは、有効なテーブルにするために必要なすべてのタグを追加することを意味します。この場合は<table>でラッピングするだけで十分です。

次に、追加のCSSを適用して、表の行の中央にボタンを配置します。下の例では、列をtrの全幅に伸ばすためにcolspan='2'を入力した場合は、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>