Content center in ion-row

Ionic Framework ionic-v3
1

I need center my two button in a row.

<ion-content id="myPage">
    <ion-grid>
        <ion-row align-items-center>
            <ion-col col-6>
                <button ion-button class="test">
                    <div>
                        <ion-icon name='appname-customicon1' style="zoom:1.5;">
                        </ion-icon><br>
                        <label>Refresh</label>
                    </div>
                </button>
            </ion-col>
            <ion-col col-6>
                <button ion-button class="test">
                    <div>
                        <ion-icon name='appname-customicon1' style="zoom:1.5;">
                        </ion-icon><br>
                        <label>Refresh</label>
                    </div>
                </button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

and i use my own icon and css for this page. css was

.test{ width: 120px; height: 80px; }

My app current look is like this
cnt
Please help me to solve this matter. Thank you

2

try justify-content-center in ion-row

1 Like
4

try <ion-row text-center

1 Like
5

Worked like charm. :grinning: but name is text-center :yum:

1 Like
6

lol, you welcome m8 :stuck_out_tongue:

1 Like
7

Thank for your effort :blush: :grinning: but it didn’t worked for me :no_mouth: @ mohamedwahshey code was worked fine.

8

Bro do you have any idea why my button text got capitalize and bold? :roll_eyes:

9

it’s because there are some custom styles from Ionic framework to the tags like labels, span, p …etc
you can give the element you want a text-transform property
check it here:

and font-weight for controlling your text (bold or none) or you can give it a number like 200
check it here:

1 Like
10

you are a solution factory :star_struck:

1 Like
11

Welcome any time m8 ^^

1 Like