垂直居中导航栏

Question

我有一个标题,里面有两个元素.第一个是公司徽标的图像,宽度设置为25%.另一个是导航栏,其元素设置为内联,因此它是水平的.我想将导航栏设置在垂直中心,但对于我的生活,我无法弄明白.我已将我所知道的所有内容设置为可以使用vertical-align的元素,并将所有内容放在显示内联或表格单元格中以应用它.什么都行不通.

请记住,我不仅仅给它一个静态百分比填充或边缘顶部的原因是因为随着页面变宽,图像高度随着宽度的增加而扩展,因此当您水平扩展浏览器时,导航变得越来越远地点.

我非常感谢任何帮助,因为我尝试过(比我想承认的要长得多)只是垂直居中对象.

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

这是你原来小提琴的一个分支.您需要设置inline-block徽标和nav元素本身:

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

而不是尝试的float东西.