How to center-align jQuery UI tabs - with screenshot

Question

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();

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":

Answer 1

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

Answer 2

The easiest way is to apply text-align: center on the container (the UL element) and unfloat the LI:

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

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