Correct method to center elements in ionic2
Solution 1
Update
Just like @AndrewGraham-Yooll mentioned in his answer, the fab-center
attribute was removed a few versions ago, so now the only way to do it would be to use a container with the text-center
utility attribute
<ion-content padding class="login-signup">
<ion-card text-center>
<div class="or-label">
SOME-TEXT
</div>
<button outline>Signup</button>
</ion-card>
</ion-content>
You can center the button
by adding the Ionic2 attribute fab-center
like this:
<button fab-center outline>Signup</button>
You can find more information about Ionic2 attributes in Ionic2 docs.
Regarding the other div
, because it's not an Ionic component (like a button, or label), you should center it by using some traditional css rules
like you're doing or using a Utility attribute like text-center
.
Please also notice that in your code, there is a missing clossing tag:
</ion-card>
Solution 2
Ionic 2 has some useful Utility Attributes that can be added to elements.
In this case adding text-center
to an element will apply the text-align: center
property to it, causing its inner content to be centered.
An example using your code would be something like...
<ion-card text-center>
<div class="or-label">
SOME-TEXT
</div>
<button outline>Signup</button>
</ion-card>
Solution 3
@sebferras' answer is no longer correct for release Ionic 2 >2.0.0
You must encase you button in a div
and apply text-center
.
<div text-center>
<button ion-button large>
Click Here
</button>
</div>
runtimeZero
2001 - 2003 Masters in Computer Science from USC, Los Angeles 2003 - 2007 - C++/Perl developer at Fortune 100 company 2007 - 2012 - Web applications developer at startup 2013 - 2017 - JavaScript developer (MEAN stack) Total Experience: 15+ years Current position: Software Architect and Lead Engineer for a firm in NY Open to remote part time opportunities
Updated on September 13, 2020Comments
-
runtimeZero over 3 years
I have placed some text and a button on page. I am currenlty centering it using traditional css methods that i know of. Is this the correct way to center in IONIC 2?
<ion-content padding class="login-signup"> <ion-card> <div class="or-label"> SOME-TEXT </div> <div class="signup-button"> <button outline>Signup</button> </div> </ion-content>
// corresponding css
.or-label { width: 20%; font-size: 16px; margin: 0 auto; margin-top: 2em; margin-bottom: 2em; height: 50px; text-align: center; color: red; } .signup-button { text-align:center; }