How to centre a button?


Hi guys ! :slight_smile:

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

But I obtain this on Ionic view :

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


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


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

        <div class="row" >
        <div class="col" >
            <a class="button button-block button-custom2">
        <div  class="col">
            <a class="button button-block button-custom2" >

you can replace my button class with yours


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


Do you have an idea ?


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

    <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  class="col">
 <button class="button" ion-button color="secondory" roundoutline   ></button>

change the button class and replace it with your



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

and I obtain this :

Do I have to write any css code ?


please, I’m sorry but I need your help


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


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


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

<div text-center>

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;


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>


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


May I see your updated code now?


sure :smile:


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


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


It worked for me too…Thanxxx