離子：如何在卡體中居中放置文本並對齊

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>

**