如何在 Ionic 4 中将 <ion-item-divider> 文本居中

Question

文本如何在 Ionic 4 中的 <ion-item-divider> 元素内水平居中？

我在 Ionic 4 docs on centering html component text. In the Ionic 3 docs, I found the text-center attribute utility as shown below and documented 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> 元素，但同样没有任何效果。

Answer 1

我最终这样做了：

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

丑:(

Answer 2

您可以创建一个 css class 并将其称为中心。我在目录主题中使用了全局variables.scss：

.center {
    text-align: center;
}

那么你可以这样做：

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

请不要使用内联样式.. What's so bad about in-line CSS?

Answer 3

在 Ionic 4 中，您似乎应该在离子标签上设置文本中心，尝试：

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

Answer 4

已替换为 ion-text-center

<ion-item-divider class="ion-text-center">
  PLEASE CENTER ME!
</ion-item-divider>

如何在 Ionic 4 中将 <ion-item-divider> 文本居中

How to center <ion-item-divider> text in Ionic 4

ionic-framework

ionic4