如何水平对齐离子网格单元的内容

【问题标题】：How to horizontally align content of ion-grid cell如何水平对齐离子网格单元的内容
【发布时间】：2019-07-01 19:03:55
【问题描述】：

使用 ion-grid 时，如何将单元格的内容水平对齐到单元格的左/右/中心？

  <ion-grid>
    <ion-row>
      <ion-col class="ion-align-self-left">
        left
      </ion-col>
      <ion-col class="ion-align-self-right">
        right
      </ion-col>
    </ion-row>
  </ion-grid>

内容总是左对齐，我希望文本“右”对齐到它自己的单元格的右侧。

【问题讨论】：

标签： angular typescript ionic4

【解决方案1】：

您只需要将ion-text-end css 类用作documented here：

  <ion-grid>
    <ion-row>
      <ion-col class="ion-text-start">
        left
      </ion-col>
      <ion-col class="ion-text-end">
        right
      </ion-col>
    </ion-row>
  </ion-grid>

呈现为：

顺便说一句：您尝试使用的 flex 选项是错误的类。在 Ionic4 中，它是 start and end not left and right。

【讨论】：