如何在 Ionic 4 的 <ion-list-header> 中居中 <ion-label>？

Question

<ion-label> 中的文本如何在 Ionic 4 的 <ion-list-header> 元素中水平居中？

我找到了如下所示的 text-center 属性实用程序，并记录在 ionic doc 中，但它不起作用。

我也尝试添加class="ion-center-text"。

但是当<ion-label> 在<ion-list-header> 中时，这两种测试都不起作用。 但是，如果 <ion-label> 被包裹在 <ion-item> 中，这将很有效！

    <ion-list-header text-center>
      <ion-label>Text not centered</ion-label>
    </ion-list-header>

或：

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

或

    <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-label> 集中在一个 <ion-list-header> 中。

有人有与 ionic 4 的“最佳实践”相匹配的解决方案吗？

---

在@annaya 的帮助下找到的解决方案是在display:block 上更改<ion-list-header> 的显示模式，或者更好地保留display:flex 并添加justify-content:center。 像这样：

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

与：

    list-item-header{
        justify-content: center;
    }

感谢回复、cmets 和英文更正；）

Answer 1

ion-list-header{
     display:block;
     text-align: center;
}

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

Answer 2

如果你想在 ion-list-header 中居中，可以将ion-label 的左右边距设置为 auto，例如

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

另外，ion-list-header 带有一些默认填充，请确保将其设置为零。

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

Answer 3

我发现 ion-item 和 ion-label 有相当固执的行为； 当它们不适合您的应用程序时，退回到 div、h1 等是没有羞耻的； 如果你只是在你的 ion-list-header 中放置一个 h1 或 h2 ，它应该可以用最少的样式来做你想做的事情。