web-dev-qa-db-ja.com

Ionic 4で<ion-item-divider>テキストを中央揃えにする方法

Ionic 4の<ion-item-divider>要素内でテキストを水平方向に中央揃えするにはどうすればよいですか？

Ionic 4 docs HTMLコンポーネントテキストの中央揃えで何も見つかりません。Ionic 3 docsで、以下に示すようにtext-center属性ユーティリティ here に記載されていますが、機能しません。

<ion-content padding>
  <ion-list>
    <ion-item>
      Hello, I am left aligned
    </ion-item>
    <ion-item-divider text-center>
      PLEASE CENTER ME!
    </ion-item-divider>
  </ion-list>
</ion-content>

また、style="text-align: center;"要素に<ion-item-divider>を追加してみましたが、それも何も行いませんでした。

ionic-frameworkionic4
4
Lightbeard

私はこれをやった：

  <ion-item-divider>
    <div style="width: 100%; text-align: center;">PLEASE CENTER ME!!</div>
  </ion-item-divider>

醜い ：（

4
Lightbeard

あなたはCSSクラスを作成し、それをセンターと呼ぶことができます。私はディレクトリのテーマでグローバルvariables.scssを使用しました：

.center {
    text-align: center;
}

それからあなたはこのようなことをすることができます：

<ion-label>
    <p class="center">Some text</p>
</ion-label>

インラインスタイルは使用しないでください。 インラインCSSの何が悪いのですか？

1
Zonker

Ionic 4では、テキストラベルをイオンラベルに設定することになっているようですが、

<ion-item-divider> <ion-label text-center>PLEASE CENTER ME!!</ion-label> </ion-item-divider>

1
Volmar