如何使css导航栏居中
如何使css导航栏居中
提问于 2013-06-28 23:44:36
我试图将我的css导航栏居中，但找不出为什么不工作，我哪里做错了。我想把它放在页面的中央上方。我试着使用空白处:0自动，但我的代码如下所示：
<style>
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link,a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
li {
float: left;
}
#menu {
background-color:#98bf21;
}
</style>
<div id="menu">
<header>
<ul>
<li><a href="Home.aspx">Home</a></li>
<li><a href="News.aspx">News</a></li>
<li><a href="Articles.aspx">Articles</a></li>
<li><a href="Forum.aspx">Forum</a></li>
<li><a href="Contact.aspx">Contact</a></li>
<li><a href="About.aspx">About</a></li>
</ul>
</header>
</div>回答 6
Stack Overflow用户
发布于 2013-12-18 14:46:41
margin: 0 auto;仅适用于定义了宽度的项目。但是，按照您当前编写的方式，当您确实想要将ul居中时，每个a标签都试图居中。当你不知道你的ul的宽度时，这是一个很好的居中方式。在header、ul和li元素中使用这些样式。将样式添加到您的a标签以适应需求。
header {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
ul {
float: left;
list-style: none;
position: relative;
left: 50%;
}
li {
display: block;
float: left;
position: relative;
right: 50%;
}这里发生的事情是，我们将标题设置为全宽，然后将ul推到浏览器宽度的一半。然后我们将li的宽度推到ul宽度的一半，而ul现在将它们放在页面的中心。
这里有一个链接，里面有一个非常有用的教程，介绍如何做这件事：http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
祝好运!
Stack Overflow用户
发布于 2013-06-28 23:51:44
使用inline-block css的魔力:)
Stack Overflow用户
发布于 2013-06-28 23:50:00
li {
display: inline-block;
}
#menu {
background-color:#98bf21;
margin: 0 auto;
text-align: center;
width: 80%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17368615
复制相关文章
相似问题