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/