Ionic 3, содержание иона-Col должно выравнивать середину

Question

У меня есть табличный дизайн, из которого два иона-Col в ионном ряду имеют разное количество линий. но мне нужно выровнять содержимое по центру. что будет лучшим решением для этого?

<ion-content padding>
  <ion-grid>
    <ion-row>
       ....other cols....
       <ion-col col-6>
        <label>Date of Audit:
          <h2>01/30/18<br/>
          1:06:50<small>PM UTC</small></h2>
        </label>
      </ion-col>
      <ion-col col-6 text-center center class="overall-score">
        <label>Overall Score:
          <h1>40%</h1>
        </label>
      </ion-col>
   </ion-row>
  </ion-grid>
</ion-content>

Answer 1

Используйте Сетки, строки и столбцы для получения хороших практик, прочитайте Ионная документация , просто и эффективно.

Для центра с этим:

<ion-grid>
  <ion-row justify-content-center>
    <h1>This is center</h1>
  </ion-row>
</ion-grid>

Answer 2

Стиль должен быть применен к ионному столбцу, чтобы центрировать его содержимое.

CSS:

ion-col {
  text-align: center;
}

или

HTML:

<ion-col class="someclass">

CSS:

ion-col.someclass {
  text-align: center;
}

Answer 3

добавить ионный ряд

<ion-col>
  <ion-row style="min-height:100%" justify-content-center align-items-center>
    <p>test</p>
  </ion-row>
</ion-col>

Answer 4

Создать новый класс CSS:

.align-text-middle {
    display: flex;
    align-items: center;
}

И добавьте этот класс к ионному столбцу.