Question

我似乎无法将水平#menu置于页面中心。我试过添加一个容器DIV，但我似乎无法让它工作。

这是我的HTML标记：

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#container {
    margin:0 auto;
    width: 100%;
}

#menu {
    list-style:none;
    width:940px;

    height:43px;

    background: #014464;
    border: 1px solid #002232;
}

#menu ul, li {
    font-size:14px; 
    font-family: Segoe UI;
    line-height:21px;
    text-align:left;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;   
    background: #F4F4F4;

}

#menu li a {
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
}

#menu li:hover a {
    color:#161616;
}

.dropdown_column {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;
    background:#F4F4F4;
    width: 560px;
}
#menu li:hover .dropdown_column {
    left:-1px;
    top:auto;
}
.sub_col {  width:130px;    }
.col    {   width:550px;    }
.sub_col, .col {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
#menu .menu_right {
    float:right;
    margin-right:0px;
}


#menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}

#menu ul li {
    line-height:21px;
    text-align:left;
}
#menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #666666;
}
#menu h3 {
    font-size:14px;
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
}


#menu li:hover div a {
    font-size:12px;
    color:#015b86;
}
#menu li:hover div a:hover {
    color:#FFF;
    background: #014464;
}
#menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
}
#menu li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align: left;
    width:130px;
}
#menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}


</style>

</head>

<body>

<div id="container">
<ul id="menu">
    <li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->

        <div class="dropdown_column"><!-- Begin 4 columns container -->

            <div class="col">
                <h2>This is a heading title</h2>
            </div>

            <div class="sub_col">

                <h3>Some Links</h3>
                <ul>
                    <li><a href="#">ThemeForest</a></li>
                    <li><a href="#">GraphicRiver</a></li>
                    <li><a href="#">ActiveDen</a></li>
                    <li><a href="#">VideoHive</a></li>
                    <li><a href="#">3DOcean</a></li>
                </ul>   

            </div>

            <div class="sub_col">

                <h3>Useful Links</h3>
                <ul>
                    <li><a href="#">NetTuts</a></li>
                    <li><a href="#">VectorTuts</a></li>
                    <li><a href="#">PsdTuts</a></li>
                    <li><a href="#">PhotoTuts</a></li>
                    <li><a href="#">ActiveTuts</a></li>
                </ul>   

            </div>

            <div class="sub_col">

                <h3>Other Stuff</h3>
                <ul>
                    <li><a href="#">FreelanceSwitch</a></li>
                    <li><a href="#">Creattica</a></li>
                    <li><a href="#">WorkAwesome</a></li>
                    <li><a href="#">Mac Apps</a></li>
                    <li><a href="#">Web Apps</a></li>
                </ul>   

            </div>

            <div class="sub_col">

                <h3>Misc</h3>
                <ul>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Flash</a></li>
                    <li><a href="#">Illustration</a></li>
                    <li><a href="#">More...</a></li>
                </ul>   

            </div>

        </div><!-- End 4 columns container -->

    </li><!-- End 4 columns Item -->




</ul>
</div>
</body>

</html>

Answer 1

将margin: 0 auto;添加到您的#menu ul。

<强> DEMO

Answer 2

使用样式text-align: center

在div中包装菜单

将水平菜单居中放在页面中央

2 个答案: