css - 使用 css 的垂直居中 float block 而不使用表格或绝对定位

Question

我试图将标题中的所有图像垂直居中。

http://jsfiddle.net/falven/qbcswo0g/1/

<header>
    <div class="centered">
        <nav>
            <ul>
                <li><a href=""><img src="http://dapper-apps.com/media/nav/ATFrancoNav.png" alt="AT Franco"></a></li>
                <li><a href=""><img src="http://dapper-apps.com/media/nav/KamisNightmareNav.png" alt="Kami's Nightmare"></a></li>
            </ul>
        </nav>
        <h1><a href="/"><img src="http://dapper-apps.com/media/Logo.svg" alt="Dapper Apps"></a></h1>
        <nav>
            <ul>
                <li><a href=""><img src="" alt="Spotter"></a></li>
                <li><a href=""><img src="http://dapper-apps.com/media/nav/DapperAppsNav.png" alt="About"></a></li>
            </ul>
        </nav>
    </div>
</header>

.centered {
    margin: 0 10% 0 10%;
}

header {
    background-color: #FFF;
    width: 100%;
    z-index: 2;
    position: fixed;
    transition: all 0.15s linear;
    border-bottom: 1px solid #D6D6D6;
}

header > div {
    overflow: hidden;
}

header > div > h1 {
    width: 50%;
    float: left;
    overflow: hidden;
}

header > div > h1 > a > img {
    width: 100%;
}

header > div > nav {
    width: 25%;
    float: left;
    text-align: center;
}

header > div > nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header > div > nav > ul > li {
    display: inline;
    width: 50%;
}

header > div > nav > ul > li > a > img {
    width: 25%;
    max-width: 50px;
}

我找到的所有答案都涉及使用语义不正确的表格布局和绝对定位，这在我的情况下不起作用，因为标题是固定的。我本质上想要的是能够继续向标题中的导航链接添加列表项，并让标题自动垂直增长，但保留 nav 和 h1 元素垂直居中并占据标题的整个高度。

Answer 1

您可以使用具有垂直对齐属性的内联 block 。确保从 nav 和 h1 中删除 float 属性。

http://jsfiddle.net/qbcswo0g/3/

header > div {
    font-size: 0; /* fix for white space */
}

header > div > nav, header > div > h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}