I want to change the Text alignment Center to Left

Ionic Framework Ionic Vue
1

image
image827×664 29.3 KB

How can I Style Ion-button inside elements…

I want to change the button text alignment. but its not working…

My CSS:

ion-button::part(native) .button-inner{justify-content: flex-start !important;}

1 Like
2

Hi, I think you can achieve this by using margin-right: auto:

<!-- use margin-right: auto for pushing text all the way to the start -->
<ion-button>
  <span style="margin-right: auto">start</span>
</ion-button>

I also made a stackblitz playground (Ionic Vue Button Text Alignment - StackBlitz), so you can see these changes in actions, hope this is helpful :smile:

As a side note, according to ::part() - CSS: Cascading Style Sheets | MDN, it seems that there is a limitation for the ::part() selector.

/* This is a valid syntax */
ion-button::part(native) {
  /* css style here works */
}

/* This is not a valid syntax */
ion-button::part(native) .button-inner {
  /* css style here won't work... */
}

So we can only use ::part(native) selector to style the .button-native DOM element, and cannot style the child elements inside .button-native in this way.

1 Like
3

Thanks for your Suggestion :+1:

But Is there any way to style the child elements inside .button-native :thinking: