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 に答える