Question

我似乎无法让我的菜单正确居中。任何人都可以看到问题吗？

    ul#navigation {
        float: left;
        margin: 0 auto;
        padding: 0;
        list-style-type: none;
        min-width: 100px;
        background: #003d4c;
        padding-bottom: 15px;
        text-align: center;
    }

    ul#navigation li {

        border: 1px black solid;
        min-width: 100px;
        background-color: white;
        list-style-type: none;
        display: inline-block;
    }

    ul.sub_navigation {
        position: absolute;
        display: none;
    }

    ul.sub_navigation li {
        clear: both;
    }

    a, a:active, a:visited {
        display: block;
        padding: 10px;
    }

    #header{
        text-align: center;
        padding: 10px 20px;
    }

这是HTML：

<div id="container">
    <div id="header">
        <br />
        <ul id="navigation">
            <li class="dropdown"><a href="#"></a>
                <ul class="sub_navigation">
                    <li><a href="#">Sub Navigation 1</a></li>
                    <li><a href="#">Sub Navigation 2</a></li>
                    <li><a href="#">Sub Navigation 3</a></li>
                </ul>
            </li>
            ...

Answer 1

将导航置于中心是一个常见的问题，但并不是一个简单的问题，特别是如果您希望它可以跨浏览器同步。我总是使用一种非常好的技术，在page上有很好的解释。

基本上归结为：

你向左漂浮你的容器div，给它一个100％的宽度和一个职位相对
你漂浮你的ul左边，并给它一个50％的相对位置
你向左漂浮，并给它一个相对于50％的位置

使用示例

查看有关荆棘解释的链接

Answer 2

我决定使用的解决方案是使用此CSS将主要ul包装在div中：

.menuContainer {
    display: table;
    margin: auto;
}

居中我的浮动ul

2 个答案: