Trouble with the alignment of text in the Ionic 2 buttons

Ionic Framework ionic-v3
1

I started my studies with Ionic 2 these days, I am not able to align the text inside of the buttons to right or left, it always centralized.
image

1-I tried to use the tags (text-left, text-right), fail;

2-I tried to use css, without success:

text-align: right;
text-align: -moz-right;
text-align: -webkit-right;`
vertical-align: 30%;

3-I tried to change the HTML, without success:

<ion-content text-left>
    <ion-col text-left>
        <ion-row text-left>
            <button ion-button text-left class="buttons" >Need Align</button>
        </ion-row>
    </ion-col>
</ion-content>

<ion-content text-left>
    <div text-left>
        <p text-left>
            <button ion-button  text-left class="buttons" >text to  Align </button>
        </p>
    </div>
</ion-content>

<ion-content text-left>
    <div text-left>
        <p text-left>
            <button ion-button text-left class="buttons" ><p text-left>PText here </p></button>
        </p>
    </div>
</ion-content>

Any tips?

2

Ai too bad you spend 2 days working on this. This has actually nothing to do with text-align, since the buttons are based on flexbox. If you use the css inspector, you would notice this justify-content property set to center on the button-inner class. Override this class by setting justify-content to flex-start and you’re good to go!

It would be nice to also have a CSS utility (like the ones you can find over here http://ionicframework.com/docs/theming/css-utilities/ ) for setting flex positions to start and end for the content of a button.

1 Like
3

Ouch, I just said : “I started to study ‘Ionic 2’ these days”. I’m a beginner in Front End.
Many thanks for the help, worked perfectly.

1 Like