Question

我ul内有div。我想把它集中在一起。这是 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%;
}

左边距和右边距设置将使菜单位于页面中心。我在你的JSFiddle中对它进行了快速测试，以确保它有效。

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

Answer 2

您可以使用text-align:center来完成您的工作。

在DIV中水平对中UL

2 个答案: