尝试垂直对齐具有固定高度的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

Fiddle

<强> 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;
}