Centering a column inside a grid/row


#1

I have a card and I’ve inserted a grid in it with a column but I am not being able to center it so that no matter what size the display is, the address will be shown in the middle.

<ion-grid>
...
  <ion-row>
   <ion-col>
   	 <button ion-button clear small>
        <div text-center>This text should be centered in the row but it's not</div>
      </button>
   </ion-col>
  </ion-row>
...

I’ve tried col-6 and offset-6 but this justifies it only on a specific display,as soon as I increase the width of the screen on the browser,the text moves away from the center.

Any advice on how I can fix this?


#2

css and text-align: center;?


#3

You only have one column with no explicit width, so it’s going to take up the full width. If you just want to center the contents try applying text-center to col. Not sure what the effect of cramming long text into a small button is, that’s probably why things aren’t looking right.

<ion-grid>
...
  <ion-row>
   <ion-col text-center>
   	 <button ion-button clear small>
        <div text-center>This text should be centered in the row but it's not</div>
      </button>
   </ion-col>
  </ion-row>
...

Or if you want to use the offset, then you only want to offset by 3, not 6. That way you have 3 units on each side, and a col with a width of 6 units in the middle.


#4

A button isn’t necessary, I can use the “a” tag.

However, with offset-3 the changes aren’t consistent should the width
of the screen change.
E.g
1

when I stretch the screen,this is what happens.

I am using the following code:

 	
  <ion-row>
   <ion-col col-6 offset-3 text-center>
        <a>Event Address,United Kindgom, POSTCODE</a>
   </ion-col>
  </ion-row>

 </ion-row>
</ion-grid>

#5

I believe the following worked just fine

 <ion-row>
   <ion-col col-6 offset-3 text-center>
        <a>Event Address,United Kindgom, POSTCODE</a>
   </ion-col>
  </ion-row>

It might have not work before because I had the code above wrapped in another

<ion-row></ion-row>

Not sure why.However it doesn’t work with the button tag


#6
1 of 4 2 of 4 3 of 4 4 of 4
#
#
#