垂直居中导航栏

Question

我有一个包含两个元素的标题。第一个是公司徽标图像，宽度设置为 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 你原来的小提琴。您需要在您的徽标和nav 元素本身上设置inline-block：

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

而不是试图float的东西。

Answer 2

关于将所有内容都作为内联块的答案是正确的。在这种情况下，浮动不会为您做任何事情，除了将元素从文档流中分离出来。但是，如果您的目标是较旧的浏览器，下面的解决方案应该适用于那些不支持在表格单元格外垂直对齐的浏览器：

Example Fiddle

相关的 CSS 更改在这里：

header {
    position:relative;
    display:block;
}
header:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
header nav {
    width: 70%;
    font-size: 1em;
    position: absolute;
    top: 50%;
    line-height: 200%;
    margin-top: -2em;
}

Answer 3

这是一种方法，它需要对您的标记进行微小的更改。

<div id="header">
<header role="banner">
    <nav id="navigation" role="navigation">
        <ul>
            <li>
                <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png">
            </li>
            <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>
</div>

CSS 看起来像：

    #header {
        background-color: #cccccc;
        padding: 5px 0;
    }
    header {
        background-color: #f0f0f0;
    }
    header nav {
        border: 1px solid red;
    }
    header nav ul {
        margin: 0;
        padding: 0;
    }
    header nav li {
        display: inline;
        margin: 0;
        padding: 0;
    }
    header nav li img {
        vertical-align: middle;
        border: 1px solid blue;
    }
    header nav li a {
        vertical-align: middle;
        font-size: 1.00em;
        text-decoration: none;
        background-color: white;
        color: black;
        padding: 10px;
        margin: 0 0 0 10px;
    }

关键是将徽标图像放在列表的第一个 <li> 元素中。然后将列表中的所有元素显示为inline 并使用vertical-align: middle 将它们排列起来。

您可以调整 padding 和 margin 属性以获得您需要的确切外观。

提琴供参考：http://jsfiddle.net/audetwebdesign/adW9Y/

注意：
该代码还有助于允许图像大小随视口缩放。

通过添加以下 CSS 规则：

.autoSize {
   width: inherit;
}
.autoSize img {
    width: 25%;
}

并向标记添加一个类，如下所示：

<li class="autoSize">
    <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png">
</li>

由于ul 元素扩展到视口的宽度，您可以将宽度继承给包裹图像的子li 元素。然后，您设置图像的相对宽度（在本例中为 25%），您将获得灵活/响应式缩放。