html - 居中的“inline-block” div 的强制垂直边距

Question

我将两个 div 设置为“display：inline-block”，其中一个父 div 围绕两者，“text-align：center”将两个子 div 居中。

但是，子 div 的顶部不是垂直对齐的。我尝试弄乱每个子 div 的行高以及边距，但它们不会在同一垂直线上排列。

我也不能将它们向左或向右浮动，因为它们需要居中。

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修复：

#alert {vertical-align: top;}

完整的 CSS

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

小提琴：http: //jsfiddle.net/aC5FW/1/