离子：如何在卡体中居中放置文本并对齐

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% 字符串？

Answer 1

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

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

Answer 2

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

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

Answer 3

你可以像这样添加text-center类

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

Answer 4

这两个都在 ionic 4 中准确工作 **

<ion-card text-center>
    Send Message
  </ion-card>
  <ion-card class="ion-text-center">
    Send Message 2
  </ion-card>

**