Ionic5 项目垂直对齐答案

【问题标题】：Ionic5 item vertical alignmentIonic5 项目垂直对齐
【发布时间】：2020-11-18 13:45:26
【问题描述】：

我正在尝试对齐 ion-row 中的所有项目，以使它们出现在同一行中。下面是我的代码和截图。按钮太大，按在文本字体下方。我需要按钮文本与其他文本对齐。怎么样？

我尝试了一些我在网上找到的东西，但似乎没有任何效果：

<ion-grid>
  <ion-row justify-content-center align-items-center>
    <ion-col size="8" justify-content-center align-items-center>
      <b>{{spotName}}</b>&nbsp;Surfed {{numberSessions}}x
    </ion-col>
    <ion-col size="2" justify-content-center align-items-center>
      <ion-button size="small">Add</ion-button>
    </ion-col>
    <ion-col size="2" justify-content-center align-items-center>
      More
    </ion-col>
  </ion-row>
...

【问题讨论】：

您正在使用属性。比如justify-content-center 和align-items-center。在 ionic 4+ 属性中已弃用，请在课堂上使用它们。转到 ionic 文档 css 实用程序。

标签： html ionic-framework ionic4 ionic5

【解决方案1】：

必须添加ion-row class="ion-align-items-center"

【讨论】：

你也可以使用表格而不是列。使用表格时，所有东西都水平居中。