尝试垂直对齐div中具有固定高度的两个元素

Question

我试图简单地将两个元素垂直对齐，它们在div内。 我有几张都有不同高度的图像。

的HTML

<div class="companyBox">
    <img src="http://dummyimage.com/145x150/555555/000000&text=image" />

    <div class="showPlans">
        <p>Show Plans</p>
    </div>
</div>

的CSS

.companyBox {
    height: 250px;
    background-color: #999;
    text-align: center;
}
.companyBox img {
    vertical-align: middle;
}
.companyBox .showPlans {
    vertical-align: middle;
}

这是http://jsfiddle.net/hQab5/

谢谢您的帮助，我不明白为什么我在某些本来简单的事情上遇到了麻烦。

Answer 1

小提琴

HTML：

<div class="companyBox">

    <div class="showPlans">
        <img src="http://dummyimage.com/145x150/555555/000000&text=image" />
        <p>Show Plans</p>
    </div>
</div>

CSS：

.companyBox {
    height: 250px;
    background-color: #999;
    text-align: center;
    width: 100%;
    display: table;
}
.companyBox img {
    vertical-align: middle;
    margin: 0 auto;
}
.companyBox .showPlans {
    vertical-align: middle;
    display: table-cell;
}