How to centered content in ion-col

Ionic Framework ionic-v3
1

image

I would like to center a button in an ion-col. What’s the best way to achieve this?
This is my html code:

     <ion-col width-25>
         <button ion-button icon-left clear>
            <ion-icon ios="ios-heart" md="md-heart"></ion-icon>
            <span class="buttonText">3</span>
         </button>
     </ion-col>

I have tried with the following css but it didn’t work

    //To center content
    display: flex !important;
    align-items: center !important;
    justify-content: right !important;
2

Look at the theme docs sass utils, you can apply text-center

3 Likes
3

Mike, you beat me to the answer :).

Although I always thought the directive should be just ‘center’. The alignment is being applied to more that just text.