Centering a column inside a grid/row

Ionic Framework ionic-v3
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?

1 Like
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.

1 Like
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.

2
2.jpg744×187 18.4 KB

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

You can center the cells in the ion-row with justify-content-center.

documents here

  <ion-grid>
    <ion-row justify-content-center>
      <ion-col size="3">
        <ion-button small fill="clear">
          <div text-center>Text Message</div>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

For example, I had to average 4 cells

black3
black3.png428×540 6.02 KB

2 Likes
8

Works like a charm. Thanks