ionic2の要素を中心にする正しい方法

Question

ページにテキストとボタンを配置しました。私はそれが私が知っている伝統的なCSSの方法を使用して中心currenltyです。これはIONIC 2を中心とする正しい方法ですか？

<ion-content padding class="login-signup"> 

    <ion-card> 

    <div class="or-label"> 
    SOME-TEXT 
    </div> 

    <div class="signup-button"> 
    <button outline>Signup</button> 
    </div> 

</ion-content> 

//対応するCSS

.or-label { 
    width: 20%; 
    font-size: 16px; 
    margin: 0 auto; 
    margin-top: 2em; 
    margin-bottom: 2em; 
    height: 50px; 
    text-align: center; 
    color: red; 
    } 


.signup-button { 
    text-align:center; 
} 

Answer 1

更新AndrewGraham-Yoollが彼の答えで述べた@、fab-center属性は、いくつかのバージョンの前に削除されたと同じように

、今それを行うための唯一の方法は、text-centerutility attribute

<ion-content padding class="login-signup"> 

    <ion-card text-center> 
    <div class="or-label"> 
     SOME-TEXT 
    </div> 
    <button outline>Signup</button> 
    </ion-card> 

</ion-content> 

でコンテナを使用することですあなたは Ionic2を追加することにより、buttonをセンタリングすることができ

---

はこのようfab-center属性：Ionic2はIonic2 docsの属性について

<button fab-center outline>Signup</button>

あなたはより多くの情報を見つけることができます。それは（ボタン、またはラベルのような）イオンのコンポーネントがありませんので、他のdivについて

、あなたがやっているようないくつかの伝統的なcss rulesを使用するかUtility attributetext-center等を用いて、それを中央にする必要があります。

また、あなたのコードでは、行方不明clossingタグがあることに注意してください：> 2.0.0

あなたはボタンを包む必要がありイオン2 </ion-card>

Answer 2

イオン2要素に追加することができるいくつかの有用なUtility Attributesを有しています。

この場合、要素にtext-centerを追加すると、要素にtext-align: centerプロパティが適用され、その内容が中央に配置されます。

のようなものになるでしょうあなたのコードを使用した例...

<ion-card text-center> 
    <div class="or-label"> 
     SOME-TEXT 
    </div> 
    <button outline>Signup</button> 
</ion-card> 

Answer 3

@sebferras'答えは、もはや正しいリリースのためにありますdivにあり、text-centerを適用してください。

<div text-center> 
    <button ion-button large> 
    Click Here 
    </button> 
</div>