centering jquery tabs

Question

i've borrowed some code from link text to nest tabs using jq

everything is ok 'cept I cannot work out to center the tabs

using the YUI library, this is v easy. However, I can't use the YUI library coz my command of JS is negligible and fitting my php to their code is murderful and a time-waster.

are there ways to center jq tabs ?

Tom

Answer 1

You can add a bit of styling:

.ui-tabs .ui-tabs-nav { float: none; text-align: center; }
.ui-tabs .ui-tabs-nav li { float: none; display: inline; }
.ui-tabs .ui-tabs-nav li a { float: none; }​

Source - Richard Worth

Make sure to include this after the jQuery UI style-sheet so it overrides, you can see a demo here.

---

If you can't use a stylesheet and must do this in code, use .css(), like this:

$("#tabs").tabs();
$(".ui-tabs .ui-tabs-nav").css({float: 'none', textAlign: 'center'});
$(".ui-tabs .ui-tabs-nav li").css({float: 'none', display: 'inline'});
$(".ui-tabs .ui-tabs-nav li a").css({float: 'none'});

Answer 2

To be honest, having got nested tabs working, I am wary of more hours coding trying to get it to work again because of an upgrade.

My reference points for nested tabs w JQ were hard to come by. I wonder if anyone can point to a good tut on the subject.