How to horizontally align content of ion-grid cell

user_6200157 0
Viewed 603

When using ion-grid, how do I horizontally align the content of the cells to the left/right/center of the cell?

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

The content is always aligned to the left, I expect the text "right" to be aligned to the right of its own cell.

ionic4 angular typescript
1 Answers

You just need to use the ion-text-end css class as 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>

Renders as:

enter image description here

BTW: the flex option you were trying to use was the wrong class for that. In Ionic4 it's start and end not left and right.

user_1563880
Related