Vertical an horizontal alignment impossible

Ionic Framework Ionic Angular
1

Hello there!
It is impossible to align items in my grid horizontally and vertically. All the documentation and utilities don’t work…my code is below and i just want the text horizontally and vertically centered in each column. How do i accomplish that? it is simply not possible

full code is here: https://github.com/obermoserkitz/ionic-grid-problem

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons collapse="true" slot="end">
      <ion-button slot="icon-only">
        <ion-icon name="menu"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>
      Orders
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-buttons collapse="true" slot="end">
        <ion-button slot="icon-only">
          <ion-icon name="menu"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title size="large">Orders</ion-title>
      <ion-searchbar></ion-searchbar>
    </ion-toolbar>
  </ion-header>

  <ion-grid>
    <ion-row justify-content-center>
      <ion-col size="12">A</ion-col></ion-row
    >
    <ion-row align-items-center>
      <ion-col
        size="6"
        sizeLg="6"
        sizeMd="6"
        sizeSm="6"
        *ngFor="let x of ['B','C','D','E','F','G']; let i=index"
        >{{x}}{{i}}</ion-col
      >
    </ion-row>
  </ion-grid>
</ion-content>
2

Your markup is using the old/removed attribute css selectors. As of V5, they were removed in favor of classes.

The docs in the layout/structure section have been updated for a while to use the classes instead of attributes.

2 Likes
3

Thank you for your answer, i have updated the code to match the new markup using classes.
But, the letters/text are still not centered vertically in the columns…and that is what i wanted to achieve.
Any ideas about how to fix that?

4

I’m having the same problem and interested in an answer as well