Question

我的目标是让我的#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>

Answer 1

只要设置了宽度，就可以margin: auto使#header居中。

为什么我的div按钮不会“居中”？

1 个答案: