web-dev-qa-db-ja.com

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

ページにテキストとボタンを配置しました。私は知っている伝統的な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;
}
htmlcssionic2ionic3
8
runtimeZero

更新

@ 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>の欠落しているclossingタグがあることに注意してください。

6
sebaferreras

Ionic 2には、要素に追加できるいくつかの便利な ユーティリティ属性 があります。

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

コードを使用した例は次のようになります...

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

@sebferrasのリリースは、リリースIonic 2> 2.0.0

ボタンをdivに入れて、text-centerを適用する必要があります。

<div text-center>
   <button ion-button large>
     Click Here
   </button>
</div>
8
Andrew Graham-Yooll