How to centre a button?

Ionic Framework ionic-v3
#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;

8 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

#21

please, how did you make it like a circle i tried round but it looked half circle half square

#22

Hi shahraZ,
You can customize your button with this doc of Ionic Components :

#23

HTML

<div class="example-center">
  <button ion-button>
  </button>
</div>

CSS

.example-center {
  text-align: center;
}
1 Like
#24 
<ion-content padding>
<p></p>

<h4 class='titre'>Welcome in </h4>
<h1 class='nom'>RUSH</h1>

<ion-grid>
     <ion-row justify-content-center align-items-end style="height:100%">
          <ion-col col-6>
               <button class='boutton' ion-button color="secondary" round outline (click)='presentModalSignup()'>Sign Up> </button>
          </ion-col>
          <ion-col col-6>
               <button class='boutton' ion-button color="secondary" round outline (click)='presentModalLogin()'>Log In> </button>          
          </ion-col>
     </ion-row>
</ion-grid>
</ion-content>
#25

Works now. Thanks eyalc. Can you help me to clear errors? if yes, my facebook : https://www.facebook.com/KSahithyan.