How do I center this menu?
How do I center this CSS menu? When I zoom out it stays to the left.
Please reply with a full new code if possible.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>10</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<h1> </h1>
<div id="tabs">
<ul>
<li><a href="http://www.free-css.com/"><span>CSS Templates</span></a></li>
<li><a href="http://www.free-css.com/"><span>CSS Layouts</span></a></li>
<li><a href="http://www.free-css.com/"><span>CSS Books</span></a></li>
<li><a href="http://www.free-css.com/"><span>CSS Menus</span></a></li>
<li><a href="http://www.free-css.com/"><span>CSS Tutorials</span></a></li>
<li><a href="http://www.free-css.com/"><span>CSS Reference</span></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.exploding-boy.com/" title="explodingboy"><span>explodingboy</span></a></li>
</ul>
</div>
</body>
</html>
body {
font: bold 11px/1.5em Verdana;
}
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}
hr {
border:none;
border-top:1px solid #CCCCCC;
height:1px;
margin-bottom:25px;
}
#tabs {
text-align: center
}
#tabs ul {
display: inline-block;
padding: 10px 0 0 0
}
#tabs {
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#ta开发者_Go百科bs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
#tabs {
border-bottom:#2763a5 1px solid;
font-size:93%;
line-height:normal;
width:100%;
text-align:center;
}
#tabs ul {
display:inline-block;
display: -moz-inline-stack; // Firefox 2 doesn't understand inline-block but this acts the same
zoom: 1; // Make IE7 display inline-block correctly
*display: inline; // Only targets IE6 & IE7
list-style-image:none;
list-style-type:none;
margin:0;
padding-bottom:0;
padding-left:50px;
padding-right:10px;
padding-top:10px;
}
(I tend to avoid using inline-block because it isn't supported correctly in many browsers. inline will work fine here.) - I was wrong here it must be inline-block, I edited the code above to reflect this with cross browser hacks to make sure it runs in all major browsers.
If you can set a fixed width on the ul inside #tabs, this is relatively easy:
#tabs ul {
width: 730px;
margin: 0 auto
}
If you can't (or don't want to) set a fixed width, you can use display: inline-block:
#tabs {
text-align: center
}
#tabs ul {
display: inline-block;
padding: 10px 0 0 0
}
If you care about IE7, use:
#tabs ul {
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px 0 0 0
}
See this answer for more details.
Remove float: left and padding for #tabs a,
Add display: inline-block and 1px solid #2763A5 for #tabs li
Last, #tabs ul gets text-align: center.
Hope this makes sense
change tabs to this:
#tabs {
float: left;
width: 50%;
font-size: 93%;
border-bottom: 1px solid #2763A5;
line-height: normal;
margin: 0 auto;
}
/*and*/
#tabs a span {
/* remove float*/
}
加载中,请稍侯......
精彩评论