css - 双下单中心问题。

Question

我在上一篇文章中有一个问题。

如何使浮动元素居中？

我发现我的问题来自<header>我之前的标签#menu tag。

如果我删除header标签中的所有内容，似乎我可以将我的 item1 到 item3 链接居中。

但是，如果我将它们添加回来，我的项目菜单将有点偏左而不是中心。

这是我的jsfiddle。

//I want to center item 1 to item 3 links in my page...

http://jsfiddle.net/yZ4va/14/

谢谢您的帮助！

Answer 1

像这样

演示

CSS

body{
    background-color: green;
    width: 500px;
    margin: 0 auto;

    color: #000305;
}

a{
    text-decoration: none;  
    color:white;
}

/* Headings */
h2 {font-size: 1.8em}   /* 22px */
h2 {font-size: 1.5em}   /* 22px */
h3 {font-size: 1.5em}   /* 20px */
h4 {font-size: 1.286em} /* 18px */

header#link{
   text-align:center;
   margin:0 auto;
}
header {
   margin:.8em;
    height:50px;
}

header ul{
    margin:0;
    padding:0;
    text-align:center;
}

header li{
    list-style: none;
    font:bold .6em arial;
    display:inline;
    margin: .3em;
    padding: 1.3em;
    background-color: #A8A8A8;
}
section#menu{
   text-align:center;
   margin:0 auto;
}

nav ul{
    display: inline-block;
    background-color: red;
    margin:0;
    padding:0;
}
nav ul li{
    list-style: none;
    font:bold .6em arial;
    float: left;
    margin: .3em;
    padding: 1.3em;
    background-color: #A8A8A8;
}