html - 尝试以固定高度垂直对齐 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;
}