How to center-align jQuery UI tabs - with screenshot

jquery-ui jquery-ui-tabs
Alexander Farber picture Alexander Farber · May 12, 2012 · Viewed 11.5k times · Source

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

Answer

pabera picture pabera · May 12, 2012

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

Related questions

jQuery UI Tabs - How to Get Currently Selected Tab Index

I know this specific question has been asked before, but I am not getting any results using the bind() event on the jQuery UI Tabs plugin. I just need the index of the newly selected tab to perform an action …

Read More
jQuery - trapping tab select event

I'm a jQuery noob and I'm trying to figure out how to trap the tab selected event. Using jQuery 1.2.3 and corresponding jQuery UI tabs (not my choice and I have no control over it). It's a nested tab with the …

Read More
get the current tab in jQuery UI tabs

I am using jQuery UI Tabs inside of the jQuery UI dialog window. I've come across an instance, where I need to find the id of the current tab when clicking on one of the dialog buttons. Looking at the …

Read More