css - 在 DIV 中水平居中 UL

Question

我在 div 中有一个 ul。我想把它居中。这是 fiddle

HTML

<div id="menu-top">
   <div id="menu-container">
      <div id="menu-mask">
         <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
         </ul>
      </div>
   </div>
</div>

CSS

body {
    background-color: #000;
    overflow: hidden;
}

#menu-top {
    position: absolute;
    display: block;
    width: 100%;
    height: 26px;
    top: 0px;
    z-index: 9;
}

#menu-container {
    width: 840px;
    margin: auto;
}

#menu-mask {
    display: inline-block;
    height: 26px;
    margin: auto;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 800px;
}

#menu {
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    height: 26px;
    margin: auto;
    padding: 0px;
    width: 100%;
}

#menu li {
    padding-right: 20px;
    clear: none;
    float: left;
    display: inline;
}

#menu li a {
    font-size: 12px;
    line-height: 26px;
    letter-spacing: 1.5px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

Answer 1

开始吧...将您的#menu 更改为:

#menu {
    position: absolute;
    display: block;
    margin-left:25%;
    margin-right:25%;
    margin-top:auto;
    margin-bottom:auto;
    top: 0px;
    height: 26px;
    padding: 0px;
    width: 100%;
}

margin-left 和 margin-right 设置将使您的菜单在页面上居中。我在您的 JSFiddle 中对其进行了快速测试，以确保其正常工作。

哦，这里是更新后的 JSFiddle 显示的变化...... http://jsfiddle.net/LyJz9/7/