[SOLVED] How to center ion-grid in ion-content?

How to center ion-grid in ion-content?

In a site with using CDN version of Ionic I got a problem.

I have the following working :

<ion-grid>
  <ion-row >
    <ion-col>
      ABC 
    </ion-col>
    <ion-col>
      XYZ
    </ion-col>
  </ion-row>
</ion-grid>

The grid is in the middle (horizontally).

But when I add ion-content around this part, The grid if fully aligned over the screen horizontally.

<ion-content>
<ion-grid>
  <ion-row >
    <ion-col>
      ABC 
    </ion-col>
    <ion-col>
      XYZ
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

I have tried adding style="inline-margin: auto;" to ion-grid.

But that did not work. In the browser tools I see that, "inline-margin: auto;" disappeared when adding ion-content.

Anyone who knows what the reason is, and how to make te same centering of content possible with ion-content ?

Solution

With ion-content, your grid automatically takes up 100% of the available width. Adding margin: auto (as well as margin-inline) without specifying a limit wouldn't change that.

<ion-grid style="max-width: 500px; margin: 0 auto;">
    <ion-row>
      <ion-col>ABC</ion-col>
      <ion-col>XYZ</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Let me know if this works! :) Good luck!