【问题标题】:How to center <ion-item-divider> text in Ionic 4如何在 Ionic 4 中居中 <ion-item-divider> 文本
【发布时间】:2019-01-05 23:54:15
【问题描述】:

如何在 Ionic 4 的 &lt;ion-item-divider&gt; 元素中水平居中文本?

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

<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;" 添加到&lt;ion-item-divider&gt; 元素,但也没有任何效果。

【问题讨论】:

标签: ionic-framework ionic4


【解决方案1】:

我最终这样做了:

  <ion-item-divider>
    <div style="width: 100%; text-align: center;">PLEASE CENTER ME!!</div>
  </ion-item-divider>

丑:(

【讨论】:

    【解决方案2】:

    您可以创建一个 css 类并将其称为中心。我在目录主题中使用了全局 variables.scss:

    .center {
        text-align: center;
    }
    

    那么你可以这样做:

    <ion-label>
        <p class="center">Some text</p>
    </ion-label>
    

    请不要使用内联样式.. What's so bad about in-line CSS?

    【讨论】:

      【解决方案3】:

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

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

      【讨论】:

      • 你需要把 width: 100% 放在 ion-label: ... PLEASE CENTER ME!!-标签> ...
      • 显然不再,它在 v4.1 上运行良好
      猜你喜欢
      • 2016-06-07
      • 2019-12-24
      • 2018-09-25
      • 2020-10-25
      • 2019-08-11
      • 2019-12-06
      • 2019-10-25
      • 2019-09-29
      • 2017-11-09
      相关资源
      最近更新 更多