html - 垂直居中导航栏

Question

我有一个包含两个元素的标题。第一个是公司 Logo 图像，宽度设置为 25%。另一个是导航栏，其元素设置为内联，因此它是水平的。我希望将导航栏设置为垂直居中，但我这辈子都弄不明白。我已经将我所知道的一切都设置为一个可以使用垂直对齐的元素，并将所有内容都放在显示内联或表格单元格中以应用它。什么都没用。

请记住，我不只是给它一个静态百分比填充或边距顶部的原因是因为随着页面变宽，图像高度随着宽度而扩展，因此当您水平扩展浏览器时，导航变得越来越多更不合适。

我将非常感谢任何帮助，因为我已经尝试(比我承认的时间长得多)只是将对象垂直居中。

HTML 缩减:

<div id="container">
<header id="header" role="banner">
    <img src="images" />
    <nav id="nav" role="navigation">
    <ul>
        <li><a href="#" title="About Us">About Us</a></li>
        <li><a href="#" title="Biographies">Biographies</a></li>
        <li><a href="#" title="Services">Services</a></li>
        <li><a href="#" title="Careers">Careers</a></li>
        <li><a href="#" title="Contact">Contact</a></li>
    </ul>
    </nav>
</header>

CSS 缩减:

header img {
    height: auto;
    width: 25%;
    float: left;
    }

header nav {
    width: 75%;
    font-size: 1em;
    }

header nav li {
    display: inline-block;

    width: 19%;
    }

header nav li a {
    background: #2CB2E6;
    line-height: 

这是一个简单的 jsFiddle: http://jsfiddle.net/LbTCT/

Answer 1

Here's a fork你原来的 fiddle 。您需要在 Logo 和 nav 元素本身上设置 inline-block:

header img, header nav {
    display: inline-block;
    vertical-align: middle;
}

而不是试图 float 东西。