html - CSS 将 h1 元素与流体标题中图像的底部对齐

Question

我有一个 header 元素，其 CSS 宽度为 80%。 在该元素内，我有一个图像，我想将其放置在标题的左侧，一个 Logo ，并且我有一个 h1 元素，我希望将其放置在标题的右侧，一个标语，如下所示:

10% ---| {LOGO} {TAGLINE} |--- 10%

我的问题是，图像的高度约为 65px，h1 的文本高度约为 20px，我希望它们在底部完美对齐，以便文本的底部与图片。

我知道我可以使用行高来算出差异，或者我可以绝对定位它们并给它们一个 css“底部”属性，但是有没有更聪明的方法？

Answer 1

这应该有效:

HTML

<header>
    <img src="http://placehold.it/200x65" alt="" />
    <h1>Tagline goes here</h1>
</header>

CSS

header {
    background: #eee;
    width: 80%;
    text-align: center;
}
header > * {
    display: inline-block;
    vertical-align: bottom;
}
header h1 {
    font-size: 20px;
    line-height: 1;
    margin: 0;
}

例如 JSFiddle:http://jsfiddle.net/galengidman/9309yrL6/1/