How to Float save button to centre on the page title component

How can i float save and cancel buttons on a page title component to the middle of the page… Right-now I have them on the left side of the page. I tried the following CSS but dint work. div .title-buttons-center .nx-header-right { margin-left: auto; margin-right: auto; }

I would recommend using the new Button Set component in Brooklyn release. There is a standard property to adjust the alignment of the buttons (left, center, right). That way, you won’t have to bother with any CSS.

If you absolutely must keep the old buttons on a page title, what I used to do is place the page title component inside a responsive grid which had 3 divisions…placing the page title in the center division and setting the division width property to “Fit to Content”. Then I removed the title and sub-title from the page Title. That way, it would float nicely in the center of the responsive grid.

But again, the new button set component was designed specifically for that purpose.

Hi Conlan,


I tried the button set component and i set the buttons position to center. But when i preview the page i am seeing the buttons floating to the left side of the page.

This is how i see in the Edit page



This is how it shows up in the preview page



I don’t have any CSS on this page and even if i change the button position to right and preview the page, i am seeing the button on the left side only when i preview the page. How do i solve this issue?

Hmm…I’m stumped then. I just tested it out in my own instance, and the button set positioning worked fine. Do you have the button set component inside any other layout components (panel set, responsive grid, etc.)?

No. I don’t have Button set component in any other place. I too tested the button component in a sample page and it worked out. But for some reason it is not working on the pop up that i wanted to.