Question

I’m trying to vertically center elements within a div, so per http://www.w3.org/Style/Examples/007/center.en.html, I set a min-height, vertical-align: middle and display: table-cell, but the text inside my div is still top-aligned.

<div id="fancybox-title-div" style="border: 1px solid black; min-height: 40px; display: table-cell; vertical-align: middle; width:50%; text-align: center; ">
    <div style="height: 50px; float: left; width: 25px; background-color: blue"></div>
    <div style="width: 70%">
    <span>text</span><br><a href="'+link+'" >view comments</a>
    </div>
</div>

Here’s a jsFiddle for a visual:

http://jsfiddle.net/ccross59/gARYk/15/

What am I doing wrong?

Answer 1

Here’s the solution from my comment: http://jsfiddle.net/thirtydot/gARYk/26/

HTML:

<div id="fancybox-title-div">
    <div class="left"></div>
    <div class="right">
        <span>text</span><br /><a href="'+link+'" >view comments</a>
    </div>
</div>

CSS:

#fancybox-title-div {
    border: 1px solid black;
    min-height: 40px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
#fancybox-title-div .left {
    display: inline-block;
    vertical-align: middle;
    height: 50px;
    width: 25px;
    background-color: blue;
}
#fancybox-title-div .right {
    display: inline-block;
    vertical-align: middle;
    width: 70%;
    border: 1px solid red;
}

If it matters, as it is this won’t work in IE7. Here’s a fixed version: http://jsfiddle.net/gARYk/27/