Question

I’ve got two div’s set to “display: inline-block” with a parent div wrapped around both and “text-align: center” to center the two children div’s.

However, the top of the children div’s are not vertically aligned. I tried messing around with the line-heights of each child div along with margins but they won’t line-up on the same vertical line.

I also cannot float them left or right because they need to be centered.

http://jsfiddle.net/aC5FW/

<div id="parent">
    <div id="child-1">Message Here</div>
    <div id="child-2"><img src="image.jpg"></div>
</div>

css:

#parent {
    width: 100%;
    height: 50%;
    text-align: center;
}

#child-1 {
    display: inline-block;
    height: 50px;
    font-size: 12px;
    line-height: 50px;
}

#child-2 {
    display: inline-block;
    height: 50px;
    width: 50px;
}

Answer 1

CSS Fix:

#alert {vertical-align: top;}

Full CSS

#alert {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    vertical-align: top;
    font-family: Helvetica;
    font-size: 14px;
    color: #fff;
    background: #333;
}

Fiddle: http://jsfiddle.net/aC5FW/1/