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

Question

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

我在 Ionic 4 docs 中找不到任何关于居中 html 组件文本的内容。在 Ionic 3 文档中，我找到了如下所示的 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> 元素，但也没有任何效果。

Answer 1

我最终这样做了：

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

丑:(

Answer 2

您可以创建一个 css 类并将其称为中心。我在目录主题中使用了全局 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>