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

Question

I have a header element that with a css width of 80%. Inside that element I have an image which I want to be positioned on the left of the header, a logo, and I have an h1 element I want positioned on the right of the header, a tagline, as follows:

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

My problem is this, the image has a height of around 65px and the h1 has a text height of about 20px, I want them to be aligned perfectly at the bottom so that the bottom of the text is flush with the bottom of the image.

I know I could use line height and work out the difference, or I could absolute position them and give them a css "bottom" attribute, but is there a smarter way?

Answer 1

This should work:

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 for example: http://jsfiddle.net/galengidman/9309yrL6/1/