html - 居中使用 CSS

Question

我在页面顶部有一些导航链接，但无法将其放置在屏幕中央。任何人都可以建议我在 CSS 中哪里出错了吗？

图片：http: //i.imgur.com/SUTWr.png

这是CSS：

#nav {
list-style-type:none;
text-align:center
}

ul li {
display:inline-block;
border-radius:10px;
background:#EEE;
margin:5px;
}

li a {
float:left;
padding:30px;
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
box-shadow:3px 3px black;
}

li a:hover {
background:#CCC;
color:#333;
}

li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}

谢谢

Answer 1

嗨，实际上我现在已经更新了你的css，我希望这项工作对你有用：-

演示

CSS

#nav {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
    background: none repeat scroll 0 0 #B8B8B8;
    height: 400px;
    list-style-type: none;
    margin: auto;
    padding: 40px 0;
    width: 400px;
}

ul li {
display:inline;

}

li a {
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
background:#EEE;
margin:5px;
padding:30px;
box-shadow:3px 3px black;
}

li a:hover {
background:#CCC;
color:#333;
}

li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}

Answer 2

尝试<ul>用<div style="margin-left: auto; margin-right: auto">.
这样，您可以<ul>一次将所有 -tags 居中。

如果图片中的“1,2,3,4,5”是 ul 元素，而#nav 是周围 div 的 id，则可以margin-left: auto; margin-right: auto在样式表中添加到 #nav。

Answer 3

这是一个如何将 UL 居中的快速演示：http: //jsfiddle.net/73Mum/1/

<div class="wrap">
 <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
 </ul>
</div>

.wrap {
 text-align:center;
 background:#999;
 padding:100px 0;
}

ul {
 width:500px;
 margin:0 auto;
}
ul li {
 display:inline-block;
 padding:10px;
 background:#ccc;
}