How to center-align content projected into a button in PrimeNG 10?

user_8397151 0
Viewed 1975

In PrimeNG 9, I could center-align the content projected into a button. Does anybody know how this can be achieved in PrimeNG 10?

<div class="ui-g ui-fluid" >
  <div class="ui-g-12">
    <button pButton>
      <div>Content</div>
      <i class="fa fa-home"></i>
    </button>
  </div>
</div>

Button Rendered in PrimeNG 9: https://i.stack.imgur.com/6Q2sW.png

I already submitted an issue of having the &nbsp; rendered when the label is missing. https://github.com/primefaces/primeng/issues/9482

primeng button css
2 Answers

Add style="width: 100%" to your Content div.

And you can set label=" " to avoid the &nbsp; char while waiting fix from PrimeNG team.

See StackBlitz

user_43593650

PrimeNG's documentation is not up-to-date when it comes to primeflex, please check primeflex's documentation directly instead:

https://www.primefaces.org/primeflex/

Below code snippet centers a button, you can re-use that to center content within the button as well:

<div class="flex justify-content-center">
    <button pButton type="button" label="Submit"></button>
</div>
user_161956940
Related