8

ページにテキストとボタンを配置しました。私は現在、私が知っている伝統的なcssメソッドを使用してそれを中心に置いています。これは 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;
}
4

3 に答える 3

6

アップデート

@AndrewGraham-Yooll が彼の回答で述べたように、この属性は数バージョン前に削除されたため、ユーティリティ属性fab-centerを持つコンテナーを使用することが唯一の方法です。text-center 

<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

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

Ionic2 属性の詳細については、Ionic2 docsを参照してください。

もう一方についてはdiv、Ionic コンポーネント (ボタンやラベルなど) ではないため、従来css rulesのようなものを使用するか、 のようなユーティリティ属性text-centerを使用して中央に配置する必要があります。

また、コードに次の終了タグがないことにも注意してください。 </ion-card>

于 2016-06-28T10:37:52.223 に答える