CODEWITHSUNDEEP
htmlcssionic2ionic3
runtimeZero
runtimeZero

Reputation: 28046

Correct method to center elements in ionic2

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

Upvotes: 8

Views: 27585

Answers (3)

sebaferreras
sebaferreras

Reputation: 44659

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>

Upvotes: 6

Andrew Graham-Yooll
Andrew Graham-Yooll

Reputation: 2258

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

Upvotes: 8

Will.Harris
Will.Harris

Reputation: 4014

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>

Upvotes: 9

Related Questions