如何将菜单中的元素居中对齐? (li
s) 我设法将菜单 (ul
) 置于我网站页面的中心,但我无法将菜单中的实际元素置于中心(主页、关于等)
您可以在这里编辑我的 HTML/CSS:http://jsfiddle.net/66reH/
查看结果
CSS/HTML:
#nav {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
margin-left:auto;
margin-right:auto;
background-color: #eee;
padding: 5px;
height: 38px;
width: 913px;
font-weight: bold;
border-style:solid;
border-width:4px;
border-color: #000;
}
#nav ul {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 170px;
}
#nav ul li {
list-style-type: none;
text-align: center;
float: left;
margin: 0px;
}
#nav ul li a {
text-decoration: none;
color: #000;
text-align: center;
display: block;
padding: 10px;
margin: 0px;
}
#nav ul li a:hover {
color: #CD0000;
}
<div id="nav" align="center">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">TOUR</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">PRESS</a></li>
<li><a href="#">PHILANTHROPY</a></li>
<li><a href="#">JOBS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
最佳答案
- 删除
#nav
div 上的对齐属性 - 将
text-align: center;
添加到#nav
选择器 CSS - 删除
ul
选择器 CSS 的margin-left
属性 - 添加 '
text-align: center;
到ul
选择器 CSS - 删除
li
选择器 CSS 上的float: left;
属性 - 将
display: inline-block;
添加到li
选择器 CSS
那里没有居中菜单。您只需在 CSS 中的 UL 左侧添加 170 像素,这样它就看起来居中了。但事实并非如此。
关于html - 如何居中对齐菜单中的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13547649/