Align button in the center of a column

Hello,

Does anyone know how to align a button in a column please ? It sticks on the left by default.

Here below my code. I tried many ways and so far none works. The class=“pull center” and “center” have text-align: center.

1
        <ion-col col-1 no-padding class="padding-top-20">
            <hr>
        </ion-col>

        <ion-col col-3 text-center>
            <div class="center">
                <button ion-button class="blue-circle-back">2</button>
            </div>
        </ion-col>
        
        <ion-col col-1 no-padding class="padding-top-20">
            <hr>
        </ion-col>

        <ion-col col-3>
            <div class="center">
                <button ion-button class="skyblue-circle-back">3</button>
            </div>
        </ion-col>
    </ion-row>
</ion-grid> 

Thank you in advance.

Paul

1 Like

Give display: inline-block; to button and then text-center will work

3 Likes

Thank you. It worked (y)

1 Like