How can i make an object center in <ion-col>?

Ionic Framework ionic-v3
1

Hello,
i want make some images or icones center in ionic 2 column dont know how! nothings works really!
can i get help plz!
ty

2 Likes
2

text-align: center should work

1 Like
3

i want make a thumbnail center in his column text align doesn’t work …!.

4

when you said ionic 2 column i assumed u were using
<ion-row><ion-col>

With that in mind, thats how i aligned my text columns on last project:

HTML
<ion-grid><ion-row><ion-col></ion-col></ion-row></ion-grid>

CSS:
ion-row {
text-align: center;
}

The same work with divs.
What element are u using?

4 Likes
5

This does not work for me. I’m trying to make a grid of avatars that is centre-balnced… I have the following structure:

<ion-grid no-padding>
  <ion-row no-padding justify-content-start align-items-start>
    <ion-col ion-item no-lines no-padding text-center col-2 *ngFor="let item of items | slice:0:12"> 
      <ion-avatar>
        <img draggable="false" [src]="item.thumbnail">
      </ion-avatar>
    </ion-col>
  </ion-row>
</ion-grid>

It seems no matter what I do with css or ionic utilities… I just cannot get the avatars to center…

44
Screen Shot 2018-06-22 at 17.21.44.jpg748Ă—346 47.9 KB

PLEASE HELP!

6

<img style=“margin: auto” …

7 Likes
7

.ele {
margin: 0 auto;
}

1 Like
8

Hello,

Add the image into a DIV with a style : text-align= “center”

you ca also add valign=“center” to IMG after that if you want to center it vertically.

cheers.

1 Like
9

I skip ion grid and go for css grid or flexbox

Better documented

Tom

10

Something would be like this:

ion-col.center-any-object {
display: flex;
justify-content: center;
}

8 Likes
11

That worked for me. I was trying to center align two buttons stacked side by side inside the same ion-col.

12

<ion-col class="ion-text-center"> </ion-col>

3 Likes
13

ion-col has 100% width by default therefore it fills up the total width of ion-row.
if you want to center ion-col in ion-row you should add size=“auto” so it wraps it’s content.

<ion-grid no-padding>
  <ion-row no-padding justify-content-start align-items-start>
    <ion-col size="auto" ion-item no-lines no-padding text-center col-2 *ngFor="let item of items | slice:0:12"> 
      <ion-avatar>
        <img draggable="false" [src]="item.thumbnail">
      </ion-avatar>
    </ion-col>
  </ion-row>
</ion-grid>
14

This does work for only text. I guess. Not others,