How Can I Center the Tabs

[rhian]

1) Script Title:
DD TAB MENU
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm
3) Describe problem:

Can somebody please tell me how I can go about centering the tabs in this nice script. By default they are left aligned. I have pasted the CSS file from the script below. It's example 4 on the Dynamic Drive web page link above. Thanks!

.ddcolortabs{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.ddcolortabs ul{
font: normal 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

.ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


.ddcolortabs a{
float:left;
color: white;
background: #678b3f url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 6px 8px 3px 7px;
}

.ddcolortabs a span{
float:none;
}

.ddcolortabs a:hover{
background-color: #8cb85c;
}

.ddcolortabs a:hover span{
background-color: #8cb85c;
}

.ddcolortabs a.current, #ddcolortabs a.current span{ /*currently selected tab*/
background-color: #8cb85c;
}

.ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #678b3f;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

.tabcontainer{
clear: left;
width:95%; /*width of 2nd level sub menus*/
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}

.tabcontent{
display:none;
}

[ddadmin]

Some of the tab styles, such as the one you're using above (ddcolortabs) is tricky to center, since they use CSS's float property to achieve its look. To be honest I haven't yet found an easy solution to it. Currently only style #1 and #5 within the 5 default styles support easily centering.

[rhian]

Ok. Thanks for the reply DD. The reason why I chose #4 is due in part to the rounded corners which I think look quite good. I guess if anybody else out there has indeed done the work required to center the tabs I would ask for them to reply here.

[ListerMint]

I just joined DD and saw your post. I guess I am a little confused. I tried


.tabcontainer{
clear: left;
width:100%; /*width of 2nd level sub menus*/
text-align: center;
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}

and I tried


.tabcontainer{
clear: left;
width:100%; /*width of 2nd level sub menus*/
padding: 0 0 0 295px; /* used because I needed more exact placement */
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}

They both worked. Am I not understanding the problem?

[ddadmin]

Rhian was referring to centering the top level tabs themselves, specifically, ones with float:left, and not the sub content DIV text, as you've posted above.