ionic-framework - Ionic 3, ion-col 内容必须居中对齐

Question

我有一个表格设计，其中 ionic 行中的两个 ion-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-col，以使其内容居中。

CSS:

ion-col {
  text-align: center;
}

或者

HTML:

<ion-col class="someclass">

CSS:

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