Trying to vertically align two elements inside a div with a fixed height

Question

I am trying to simply align two elements vertically, they are inside a div. I have several images that all have different heights.

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

Here is a http://jsfiddle.net/hQab5/

Thank you for any help, I don't understand why I am having trouble with something that I would have considered simple.

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