Search code examples
jquery-uijquery-ui-tabs

How to center-align jQuery UI tabs - with screenshot

Does anybody please know how to center-align the tabs in jQuery UI tabs?

(They are left aligned by default and I can't find the aligning option in the doc)

Here is a page where I use it to groups some charts and the current code is simply:

$('#chart_tabs').tabs();

enter image description here

UPDATE: The CSS code:

.ui-tabs .ui-tabs-nav {
        text-align: center;
}

.ui-tabs .ui-tabs-nav li {
        float: none !important;
        display: inline-block;
}

suggested by Didier (thanks) has center-aligned the tabs, but also put some strange gap underneath the tab-"buttons":

enter image description here

Solution

  • This snipped help me out back in the days..

    .centered .ui-tabs-nav {
    height: 2.35em;
    text-align: center;
}
.centered .ui-tabs-nav li {
    display: inline-block;
    float: none;
    margin: 0em;
}

    maybe this works for you too