css - 如何使 float 元素居中？

Question

我正在尝试将包含 ul 菜单的菜单居中。

菜单向左浮动，我似乎无法将菜单置于屏幕中间。

HTML

<section>
    <nav>
        <ul> 
            <li><a href='#'>item1</a></li>
            <li><a href='#'>item2</a></li>
            <li><a href='#'>item3</a></li>
            <li><a href='#'>item4</a></li>
            <li><a href='#'>item5</a></li>
        </ul>
    </nav>
</section>

CSS

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

//the and margin text align doesn't seem to work...
section {
   text-align:center;
   margin:0 auto;
}

谁能帮我解决这个问题？非常感谢!

Answer 1

正如 xec 所指出的，问题似乎出在无效的注释语法上。 CSS 中注释的正确语法是 /*Comment Here */。更正注释语法后，您的代码会使菜单居中。

/*the and margin text align doesn't seem to work...*/
section {
   text-align:center;
   margin:0 auto;
 }

Demo