html - 如何居中对齐菜单中的元素?

标签 html css menu html-lists nav

如何将菜单中的元素居中对齐? (lis) 我设法将菜单 (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 像素,这样它就看起来居中了。但事实并非如此。

DEMO HERE

关于html - 如何居中对齐菜单中的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13547649/

相关文章:

html - 带有斜边和圆 Angular 的 div

javascript - 删除待办事项列表项

css - 将堆叠的 div 放置在容器底部

html - 需要帮助才能理解。我无法完全控制过渡属性

html - 如何让行内 block 占据整行?

css - 使用 % 定位的水平菜单

javascript - 根据屏幕宽度隐藏/显示 Div

css - Chrome 中的水平滚动条,方向为 RTL

css - 在HTML中使用input_tag、a_tag、div_tag和button_tag作为按钮的规则和优势

CSS :hover dropdown. 只需要一个指针