CODEWITHSUNDEEP
jquery-uijquery-plugins
Tom
Tom

Reputation: 31

centering jquery tabs

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

Upvotes: 0

Views: 2114

Answers (1)

Nick Craver
Nick Craver

Reputation: 630429

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

Upvotes: 1

Related Questions