ionic-framework - 如何居中Ionic 4 中的文本

Question

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

我在 Ionic 4文档中找不到任何关于居中 html 组件文本的内容。在 Ionic 3 文档中，我找到了text-center如下所示的属性实用程序并在此处记录，但它不起作用。

<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>

请不要使用内联样式。内联 CSS 有什么不好？

Answer 3

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

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