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


#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

text-align: center should work


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


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

PLEASE HELP!


#6

<img style=“margin: auto” …


#7

.ele {
margin: 0 auto;
}