How to centralize primefaces menubar?

Question

I need to centralize the primefaces menubar. I tried this: <p:menubar style="text-align: center !important"> but it did not work.

Please, help!

Answer 1

Center menubar, not the contents(modified from primefaces showcase):

    <p:menubar style="width: 100px; margin-left:auto; margin-right:auto;">
        <p:submenu label="Blah" icon="ui-icon-document" />
        <p:submenu label="Blah2" icon="ui-icon-document" />
        <p:menuitem value="Quit" url="http://www.primefaces.org"
            icon="ui-icon-close" />
    </p:menubar>

Answer 2

To center elements in the menubar (aka center the content), I think you would this because the bar is 100% width. In the facelet add the "styleclass" attribute to the menubar:

<p:menubar styleClass="centeredMenuBar">  

and in the css file just add:

.centeredMenuBar.ui-menubar {
    text-align: center;
}

.centeredMenuBar .ui-menu-list {
    display: inline-block;
}