Vertical Alignment in IE8+

When IE8/9 die off, we can eventually make this even better with layout models like Flexbox. Not happening soon, however.

by Brian Blakely

HTML

<div class="valign">
    <span>
        RANDOM (VALID) HTML CONTENT
    </span>
    <span id="more">
        SOME MORE
        <br /><br /><br /><br /><br />
        CONTENT
        <div id="block">
            block elements work inside children
        </div>
    </span>
    <img src="http://cdn.memegenerator.net/instances/400x/28533448.jpg" alt="neat image" />
</div>

CSS

/*
 * Cannot set width in % (despite what you see below)
 * Width fills parent by default
 * Width larger than parent will be truncated to parent width
 * Width or height smaller than content will be enlarged to content bounds
 */
.valign {
    display: table-cell;
    width: 1%;
    vertical-align: middle;
}
.valign > * {
    display: inline-block;
    vertical-align: middle;
}

body > div {
    padding: 10px;
    background: beige;
}
#block {
    width: 200px;
    height: 50px;
    color: white;
    background: teal;
}
img {
    width: 80px;
}