CODEWITHSUNDEEP
htmlcssionic4
gausmohammad shaikh
gausmohammad shaikh

Reputation: 193

How to align ion-label in center?

I'm creating ionic 4 angular app, and using ion-label to print some text.I have facing issue with ion-label , i will assign ion-label to center but did not work. which css or ionic pre defined css used ? Below my css code give ...

.User_Label_Section {
  position: fixed;
  display: flex;
  justify-content: center;
  margin-top: 107px;
}

.user_Name {
  display: flex;
  justify-content: center;
  width: 200px;
}
<ion-row class="User_Label_Section">
  <ion-col text-center>
    <ion-label class="user_Name">ABCDEFG</ion-label>
  </ion-col>
</ion-row>

Upvotes: 2

Views: 19765

Answers (6)

dCode
dCode

Reputation: 45

Use display: flex on ion-col and margin: auto on ion-label

    <ion-row>
      <ion-col style="display: flex;">
        <ion-label style="margin:auto;">ABCDEFG</ion-label>
      </ion-col>
    </ion-row>

Upvotes: 1

MohammedAli
MohammedAli

Reputation: 2519

just remove width like below

.user_Name {
  display: flex;
  justify-content: center;
}

Upvotes: 1

Venkat smart
Venkat smart

Reputation: 112

width: 100% is enough to do that

.User_Label_Section {
  position: fixed;
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 107px;

}

.user_Name {
  display: flex;
  justify-content: center;
  width: 200px;
}
<ion-row class="User_Label_Section">
  <ion-col text-center>
    <ion-label class="user_Name">ABCDEFG</ion-label>
  </ion-col>
</ion-row>

Upvotes: 2

AKASH PANDEY
AKASH PANDEY

Reputation: 363

Give width as 100vw to .user_Name class. It will work if you want it to be aligned in centre. The issue is you have fixed the width: 200px and are trying to align the text within it. Then again this will fix the issue with the css part.

Upvotes: 2

rtpHarry
rtpHarry

Reputation: 13125

You probably need to go back to the drawing board with this and look at the way that Ionic 4 works with default styles.

This article explains the built-in classes available to you including some flex options:

The ion-row and ion-col already have flex stuff applied to them so you are fighting them and perhaps causing issues:

In general your best bet would be to lean on what the framework already provides, as that is going to be the best tested options, and then

Also, a tip for future reference: using text-center as a directive like that is more of an Ionic 3 way of doing things.

The new recommended way is to apply this using class="ion-text-center".

This is because you can't add these directives like text-center in React or Vue so they standardised on using classes for everyone.

Upvotes: 2

Showrin Barua
Showrin Barua

Reputation: 1795

I am not sure. But you can try this. It may work.

 .user_Name {
      text-align: center;
      width: 200px;
    }

Upvotes: 0

Related Questions