How to centre a button?


#1

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:


#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 :


#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 :

and I obtain this :

Do I have to write any css code ?


#10

please, I’m sorry but I need your help


#11

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…


#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;


#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>

#15

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


#16

May I see your updated code now?


#17

sure :smile:


#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.


#20

It worked for me too…Thanxxx