html - 居中两个 Div

Question

在我的文档中，我有一个标题和一个位于其下方的导航选项卡，在一个 ul 中有几个 li。在我的 header 中，我有一个 .png Logo 。现在我想在文档中创建两个装订线时将导航及其元素居中，但更重要的是我希望 header 中的 Logo 位于第一个 li 元素开始的导航上方。

在下面糟糕的插图中，您可以看到我正在努力实现的目标:

    |.PNG |  

    | li  |  li  |  li  |  li  |           

到目前为止，列表元素居中，但我不能如上所示将 .png 居中。

在此先感谢您的帮助。\:D/

编辑:

HTML

<header><img src="whatever.png"</header>
<ul class="nav">
    <li>
        <a href="/">1</a>
    </li>
    <li>
        <a href="/">2</a>
    </li>
    <li>
        <a href="/">3</a>
    </li>
    <li>
        <a href="/">4</a>
    </li>
    <li>
        <a href="/">5</a>
    </li>
    <li>
        <a href="/">6</a>
    </li>
    <li>
        <a href="/">7</a>
    </li>
</ul>

CSS:

header {margin: 0 auto; width: 100%;}
.nav {text-align: center;}

Answer 1

使标题和导航宽度相同并固定边距。

CSS

header,
nav
{
    width: 960px;
    margin: 0 auto;
}

HTML

<header>
    <img src="logo.png">
</header>
<nav>
    <ul>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
    </ul>
</nav>