Question

我正在尝试将项目列表集中在一起。我已经检查了一些其他类似的问题，但似乎无法找到正确的调整组合。

我有很多容器/子容器，但我主要对菜单导航感兴趣：

<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>

Answer 1

您正在寻找的是什么：http://jsfiddle.net/4AFkW/5/？

Answer 2

如果你知道menu-nav元素的最终宽度是什么，你可以这样做：

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

居中列表

2 个答案: