离子：如何在卡片正文中居中并对齐文本

Question

在 ionic 中，我创建了一张带有标题文本的卡片：

 <div class="card">
    <div class="item item-divider center-text">
        Title
    </div>
    <div class="item item-text-wrap">
        <div class="row">
            <div class="col col-50">.col.col-50</div>
            <div class="col">10 %</div>
            <div class="col">.col</div>
        </div>
    </div>
</div>

在哪里：

 .center-text {
   text-align: center;
}

现在的问题是文本“10 %”与标题标题不对齐。

我如何居中对齐标题和 10% 字符串？

原文由 Tom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一种方法是为行中的三个 div 中的每一个赋予以下属性：

 .item-text-wrap .col{
    width: 33.33%;
    text-align: center;
}

原文由 Tarun Dugar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<ion-text-center> 在最新版本的离子中。

 <ion-card class="ion-text-center">
    <ion-card-header>
        <ion-card-subtitle>
          MY SUBTITLE
        </ion-card-subtitle>
    </ion-card-header>
</ion-card>

原文由 Hemang 发布，翻译遵循 CC BY-SA 4.0 许可协议