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

Question

使用离子网格时，如何将单元格的内容水平对齐到单元格的left/right/center？

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

内容始终左对齐，我希望文本 "right" 与其所在单元格的右对齐。

Answer 1

你只需要使用 ion-text-end css class 作为 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 选项是错误的 class。在 Ionic4 中是 start and end not left and right.

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

How to horizontally align content of ion-grid cell

typescript

angular

ionic4