我试图将我的 CSS 菜单居中，但我遇到了问题，基本上我希望它位于我的 content div 的中心。目前它从左边显示。有谁知道我必须添加什么才能实现我想要的？下面是我的代码。
我的index.html
<head>
<meta content="en-ie" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contain">
<div id="header">
<p><img alt="" height="67" src="header.png" width="431" /><br />
</p>
</div>
<div id="tabs">
<ul>
<li><a href="http://www.free-css.com/"><span>Item 1</span></a></li>
<li><a href="http://www.free-css.com/"><span>Item 2</span></a></li>
<li><a href="http://www.free-css.com/"><span>Item 3</span></a></li>
</ul>
</div>
<div id="content">
</div>
<div id="footer" style="width: 93px; height: 12px">
</div>
</body>
</html>
我的样式.css
body{
background-color: #292929;
}
p{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 14px;
}
h2{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 18px;
}
a:link {
COLOR: #00CCFF;
}
a:visited {
COLOR: #00CCFF;
}
a:hover {
COLOR: #00CCFF;
}
a:active {
COLOR: #00CCFF;
}
/* DIV's */
#contain {
background-color:#444343;
width: 700px;
margin-left: auto ;
margin-right: auto ;
opacity: .5;
}
#header {
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
#content {
float: left;
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
#footer {
color: white;
font-size:10px;
width: 11px;
margin-left: auto ;
margin-right: auto ;
}
#tabs {
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #292929;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
text-align: center;
}
#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 */
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
最佳答案
您可以为 #tabs ul 设置固定宽度(例如 width:200px; )，然后更改 margin:0; 到 margin:0 auto; for #tabs ul
关于html - 将一个 ul 放在一个 div 中(在一个 div 中)，它本身在页面上居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4558155/