0

我有一个ul里面的div。我想把它放在中心。这是小提琴

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;
}
4

2 回答 2

2

给你……把你的#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/

于 2013-07-08T22:10:36.240 回答
0

您可能可以使用text-align:center您正在尝试做的事情。

于 2013-07-08T22:00:20.757 回答