居中內聯列表

我想中心項目列表。我檢查了其他一些類似的問題，但似乎無法找到正確的調整組合。居中內聯列表

我有不少集裝箱/子容器，但我在菜單導航主要感興趣的是：

<style type="text/css"> 
    .content { 
     position: relative; 
     border-top-width: 1px; 
     width: 100%; 
     min-width: 960px; 
     margin-top: -1px; 
    } 

    .content-container { 
     border: 0; 
     position: relative; 
     width: 960px; 
     border-radius: 0 0 0 0; 
     margin: 0px auto; 
    } 

    .full-content-container { 
     vertical-align: top; 
     display: inline-block; 
     min-height: 900px; 
     width: 958px; 
     height: 100%; 
     position: relative; 
     padding: 15px 0 0 0; 
    } 

    .browse-container { 
     padding: 16px 0 0 0; 
     font-size: 12px; 
     width: 958px; 
     text-align: center; 
    } 

    #menu-nav { 
     margin:0; 
     padding:0; 
     list-style:none; 
     float: left; 
    } 

    #menu-nav li { 
     float: left; 
     display:block; 
     background-color: #6F7D94; 
     position:relative; 
     z-index:500; 
     margin:0 1px; 
    } 

    #menu-nav li a { 
     display:block; 
     padding:5px 10px 5px 10px; 
     font-weight:200; 
     text-decoration:none; 
     text-align:center; 
     color:#fff; 
    } 

    #menu-nav li a:hover { 
     background:#ccc; 
     color:#000; 
     text-decoration:underline; 
    } 

</style>

我怎麼能水平居中下面的菜單？

<body> 

<div class="content"> 
    <div class="content-container"> 
     <div class="full-content-container"> 
      <div class="browse-container"> 
       <ul id="menu-nav"> 
        <li><a href="#">Menu 1</a></li> 
        <li><a href="#">Menu 2</a></li> 
        <li><a href="#">Menu 3</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

</body>

來源

2011-08-10 Ed.

是不是你要找的東西：http://jsfiddle.net/4AFkW/5/？

來源

2011-08-10 15:00:25 gregseth

如果你知道你的菜單導航元素的最終寬度將是，你能做到這樣：

#menu-nav { 
    margin:0; 
    padding:0; 
    list-style:none; 
    /*float: left;*/ 
    position:relative; 
    left: 50%; 
    margin-left: -90px; /* half of the width */ 
    width: 180px; 
}

來源

2011-08-10 15:00:36

這工作，但我希望它是動態的。菜單的大小可能會改變 –

居中內聯列表

回答

相關問題