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

Question

我有一个标题元素，其宽度为80％。 在那个元素里面，我有一个图像，我想要在标题的左侧放置一个标志，并且我有一个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/