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

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

score 12 · Accepted Answer · answered May 12 '12 at 07:26

12

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

answered May 12 '12 at 07:26

pabera

1,042
1
13
22

1

This has worked for me, thank you! After I've specified `
....
` – Alexander Farber May 12 '12 at 19:57

score 12 · Answer 2 · answered May 12 '12 at 07:27

12

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;
}

answered May 12 '12 at 07:27

Didier Ghys

30,396
9
75
81

Thank you, but this has added a strange gap (please see the updated question above) on all browsers I've tried... any idea why? – Alexander Farber May 12 '12 at 17:24

score 2 · Answer 3 · answered Oct 27 '16 at 10:31

2

This worked for me and avoided the gap (underneath the tabs) you mentioned:

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

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

.ui-tabs-nav li a {
  float: none;
}

answered Oct 27 '16 at 10:31

Mayinx

304
1
6
9

score 1 · Answer 4 · answered Jan 21 '21 at 03:09

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

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

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -8px;
}

.ui-tabs .ui-tabs-nav li {
  margin: 1px .2em -7px 0;
}

score 0 · Answer 5 · answered Aug 31 '21 at 12:57

0

another nice approach in modern days:

.ui-tabs .ui-tabs-nav {
    display: flex;
    justify-content: center;
}

answered Aug 31 '21 at 12:57

Mohammad Amroabadi

1

How to center-align jQuery UI tabs - with screenshot

5 Answers5