【发布时间】：2013-01-04 00:47:43
【问题描述】：
我的目标是让我的#header div 居中。它包含导航到不同页面的按钮。我尝试使用<div align=center> 标签，但它不起作用。我只是希望它像我页面上的其他所有内容一样位于中心。
这是我的代码：
<style>
#header ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#header ul li {
position:relative;
float:left;
}
#header ul li ul li a {
font-size: 12px;
}
#header ul li a {
display: block;
height: 35px;
width: 90px;
color: #666;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
line-height: 35px;
text-align: center;
}
#header ul li ul {
position: absolute;
top: 31px;
visibility: hidden;
}
#header ul li a:hover {
color: #333;
font-weight: bold;
}
#header ul li:hover ul {
visibility: visible;
}
#header {
width:100%;
margin: 0px auto 0px auto;
text-align:left;
}
body {
padding-left:40px;
padding-right:40px;
text-align: center;
}
</style>
</head>
<body bgcolor="#E6F7F4">
<center>
<p><img src="othlogo.gif"/><br />
</p>
<div id="header" align="right" >
<ul>
<li><a href"blog.html">Blog</a>
</li>
</ul>
<ul>
<li><a href"blog.html">More</a>
<ul>
<li><a href="more.html">Education</a></li>
<li><a href="more.html">Domestic</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href"blog.html">Option3</a>
<ul>
<li><a href="more.html">Psychology</a></li>
<li><a href="more.html">Map</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href"blog.html">About</a>
</li>
</ul>
</div>
【问题讨论】：
-
1.目前它在 align=right 上，但 align=center 不会做任何事情。我觉得有什么东西阻止了它居中。
-
您可以使用
margin:auto来居中...而不是center标签或align，它们已被弃用。 jsfiddle.net 将是让人们看到您的代码并帮助您修复它的好方法。是的，您有一个margin:auto，但还有其他问题。