Ionic 3，ion-col 内容必须居中对齐答案

【问题标题】：Ionic 3, ion-col content has to align middleIonic 3，ion-col 内容必须居中对齐
【发布时间】：2018-10-13 23:31:22
【问题描述】：

我有一个表格设计，其中离子行中的两个 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>

【问题讨论】：

你是说垂直中间？还是水平居中？
请垂直

标签： ionic-framework ionic3

【解决方案1】：

创建一个新的css类：

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

并将该类添加到 ion-col。

【讨论】：

对不起，八月，align-items-center 不适用于 ion-col。

【解决方案2】：

样式需要应用于 ion-col，以使其内容居中。

CSS：

ion-col {
  text-align: center;
}

或

HTML：

<ion-col class="someclass">

CSS：

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

【讨论】：

【解决方案3】：

添加离子行

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

【讨论】：

【解决方案4】：

使用Grids、rows和cols获得良好实践，阅读Ionic documentation，简单有效。

以这个为中心：

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

【讨论】：

已更新为<ion-row align-items-center>
不，你错了。 'align-items-center' 用于中心的垂直对齐，另一方面，'justify-content-center' 用于水平对齐。谢谢。
justify-content-center 在最新版本的 ionic 上对我不起作用；我为什么还要发布这个？为了好玩？
对不起，如果我的信息看起来很尖锐。如果我发布这是因为我和我所有的团队都工作过。我们已经使用 Ionic 4（和 Angular 7，但这没关系）完成了一个项目，并且这很有效。如果你愿意，我可以为你贴一个例子。但是请确保您已经像示例那样放置它，没有cols，只有一个网格和一个行，并且行内的内容与 justify-content-center 应该居中。对不起，我的英语不好。如果你得到它，请告诉我。谢谢。