如何水平对齐离子网格电池的含量

时间:2019-07-01 19:03:55

标签: angular typescript ionic4

在使用离子格栅时,如何将单元格的内容水平对齐到单元格的左/右/中心?

  <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”与其自身单元格的右侧对齐。

1 个答案:

答案 0 :(得分: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>

渲染为:

enter image description here

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