Ionic framework 如何居中<；离子标签>；内部a<；离子列表标题>；在离子4？

在Ionic 4中，

中的文本如何水平居中于

元素中

我找到了如下所示的文本中心属性实用程序，并在ionic文档中进行了记录，但它不起作用

我还尝试添加

class=“离子中心文本”

但是当

在

中时，这两个测试都不起作用。 但是，如果将

包装在

中，则此方法效果良好

与：

列表项标题{
证明内容：中心；
}

---

感谢您的回复、评论和英文更正；）

您可以将

离子标签的左右边距设置为自动，如果您想将其置于离子列表标题的中心，例如

ion-label {
    margin-left: 0px;
    margin-right: 0px;
}

此外，离子列表标题带有一些默认的填充，请确保将其设置为零

ion-list-header {
    padding-left: 0px;
}

我发现离子项目和离子标签都有相当固执己见的行为；
当它们不适合您的应用程序时，退回到div、h1等也不丢脸；
如果你只是把h1或h2放在你的离子列表标题中，它应该以最少的样式化努力来做你想要做的事情。

离子列表头{
显示：块；
文本对齐：居中；
}

文本未居中
如果您愿意，还可以添加类名。非常感谢，@annaya！你让我走上了好的方向。但是在一些测试之后，我更喜欢保留display:flex并添加justify-content:center，它们可以得到相同的结果。带显示：块；我失去了文本的垂直中心。谢谢。很高兴帮助你@cesar jacquetYou是对的，但我会尽可能接近ionic的建议并使用他们的工具。谢谢，那也行！谢谢你，帕特万。但我更喜欢经过编辑的解决方案。
    <ion-list-header>
      <ion-label class="ion-text-center">Text still not centered</ion-label>
    </ion-list-header>

    <ion-list-header  class="ion-text-center">
      <ion-label>Text still not centered</ion-label>
    </ion-list-header>

    <ion-list-header>
      <ion-label>Text centered</ion-label>
    </ion-list-header>

ion-label {
    margin-left: 0px;
    margin-right: 0px;
}

ion-list-header {
    padding-left: 0px;
}