How to centre a button?

Ionic Framework ionic-v3
1

Hi guys ! :slight_smile:

Just something simple but that a didn’t understand: I wrote this

image

But I obtain this on Ionic view :

image

But it’s ugly, I want them to be centered ! thanks for your answers :smile:

2

by simple methode you can use a row col methode
<div class row> <div class col>
<button1> </div>
<div class col> <button2>
</div> </div>
or you can use the padding

3

what do you mean ? Can you please explain clearly ? :smile:

4 
        <div class="row" >
        <div class="col" >
            <a class="button button-block button-custom2">
                login
            </a>
        </div>
        <div  class="col">
            <a class="button button-block button-custom2" >
                Register
            </a>
        </div>
    </div>

you can replace my button class with yours

5

No but I want them to be on the same line like it for example :

image

6

Do you have an idea ?

7

thats why i said that replace the a tag and paste your button tag inside the div col.
the example is using myown button you need to change it

8 
    <div class="row" >
    <div class="col" >
 <button class="button" ion-button color="secondory" roundoutline   ></button>
    change the button class and replace it with your
    </div>
    <div  class="col">
 <button class="button" ion-button color="secondory" roundoutline   ></button>

change the button class and replace it with your

    </div>
</div>
9

I’m perhaps stupid but it doesn’t work for me… I wrote that :

image
acceuil app code.PNG830×733 81.2 KB

and I obtain this :

image
acceuil app.PNG940×611 23.2 KB

Do I have to write any css code ?

10

please, I’m sorry but I need your help

11

image
Screenshot_1.png1920×1080 199 KB

man this is work for me i dont know what is going on!. cool can you demonstrate this in a code pen or jsfiddle ? i will help you . This is may be because of the additional style that you included in your project

12

I really don’t understand, but doesn’t matter…

image

13

Close the two buttons tags into a div tag and apply the text-center attr to the div:

<div text-center>
    <button>
    </button>
    <button>
    </button>
</div>

if it don’t works, try with css:

div {
    margin-left: auto;
    margin-right: auto;
}

If you was trying css code and did not see effect, you probably must to add !important in the css lines, as this: margin-left: auto !important;

9 Likes
14

First, use the ion-row and ion-col directive to create a row with two even sections. Use width-50 property on the ion-col to create a column of 50% width. You should now have two even columns with two buttons. However, by default the buttons will be aligned the to the left. To center it, either use the text-center property shown by @Colo9311 or if you’re more familiar with using style, you can use style: text-align: center or left or right to get the type of centering you are looking for.

>    <ion-content padding>
>   <ion-row>
>     <ion-col width-50 style="text-align: right">
>       <button ion-button>TEST</button>
>     </ion-col>
>     <ion-col width-50 style="text-align: left">
>       <button ion-button>TEST</button>
>     </ion-col>
>   </ion-row>
> </ion-content>
2 Likes
15

Cool ! now they are like I want but I can’t click on them… I have an error :

image
acceuil app.PNG733×587 24.8 KB

16

May I see your updated code now?

1 Like
17

sure :smile:

image
acceuil app code.PNG689×723 72 KB

18

Okay man no it works now, there was 2 “ion content” :smile:

19

Yup. Next time double check your code before you ask for help. Thanks.

1 Like
20

It worked for me too…Thanxxx