Geek Answers Handbook

The correct method of centering elements in ionic2

I placed the text and button on the page. I focus on 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; }
+6
source share
3 answers

Update

As @ AndrewGraham-Yooll mentioned in his answer, the fab-center attribute was removed several versions ago, so now the only way to do this is to use the container with the text-center attribute of the utility

 <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 fab-center attribute as follows:

<button fab-center outline>Signup</button>

Further information on the attributes of Ionic2 can be found in the Ionic2 docs .

Regarding another div , since it is not an ionic component (like a button or label), you should focus it using the traditional css rules , as you do, or using a utility attribute like text-center .

Also note that there is no clone tag in your code: </ion-card>

+4
source

Ionic 2 has several useful Utility attributes that can be added to items.

In this case, adding text-center to the element will apply the text-align: center property to it, as a result of which its internal content will be centered.

An example of using your code will look like ...

 <ion-card text-center> <div class="or-label"> SOME-TEXT </div> <button outline>Signup</button> </ion-card>
+8
source
Answer to

@sebferras is no longer suitable for the release of Ionic 2> 2.0.0

You have to pin the button in the div and apply text-center .

 <div text-center> <button ion-button large> Click Here </button> </div>
+6
source

More articles:


All Articles