如何在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>中。

有人能找到与离子4的“最佳实践”相匹配的解决方案吗？

---

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

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

具有：

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

感谢您的答复，评论和英语更正;）

Answer 1

如果您想将ion-label的左右边距设置为“自动”，例如：

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

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

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

Answer 2

我发现离子项目和离子标签具有相当自觉的行为； 当它们不适合您的应用程序时，回退到div，h1等不会感到羞耻。 如果仅将h1或h2放在离子列表标题中，它应该以最少的样式工作来完成您想要的事情。

Answer 3

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

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