ionic-framework - 如何在 Ionic 4 的 中居中 ？

Question

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

我找到了 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 的帮助下找到的解决方案是更改 <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-list-header{
     display:block;
     text-align: center;
}

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