Ionic: how to center text in a card body and align

Question

In ionic i have created a card with the header text in the center:

<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>

where:

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

The problem now is the text "10 %" is not aligned with the header title.

How can i center and align the header and the 10% string?

Answer 1

One way is to give each of the three divs in the row the following properties:

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

Answer 2

<ion-text-center> in latest version of 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

you can add text-center class like this

<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

Both of these works accurately in ionic 4 **

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

**