Question

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

<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

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

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;
}

Answer 2

使用flexbox非常容易。

只需将display: flex;和align-items: center;添加到包含图片的元素的父级。（这里是以班级为中心的div）

.centered {
    margin: 0 10% 0 10%;
    display: flex;
    align-items: center; /* align vertical */
}

Updated fiddle

实际上有多种方法可以实现垂直居中，请看一下CSS-tricks article，它会根据您的具体情况指导您完成各种方法。

使用css的垂直中心浮动块，不使用表或绝对定位

2 个答案:

Updated fiddle