html - 居中我的 float ul

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% 左边的相对位置
• 你将你的 li 向左浮动，并给它一个 50% 的相对右侧的位置

查看链接以获得带有示例的详细解释