Html Ionic5项目垂直对齐

我正在尝试将

离子行中的所有项目对齐，使它们显示在同一行中。下面是我的代码和截图。按钮太大，按在文本字体下。我需要按钮文本与其他文本对齐。怎么做

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

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


{{spotName}}浏览{{numberSessions}}x
添加
更多
...
必须添加
离子行class=“离子对齐项目中心”
您正在使用属性。类似于
justify content center
和
align items center
。在爱奥尼亚4+中，不推荐使用属性，请在类中使用它们。转到爱奥尼亚文档css实用程序。你也可以使用表格而不是列。使用桌子时，所有东西都水平居中。