即使使用display：table-cell，div内容也不会垂直居中

Question

我正在尝试将div中的元素垂直居中，因此，根据http://www.w3.org/Style/Examples/007/center.en.html，我设置了min-height，vertical-align: middle和display: table-cell，但是我div内的文字仍然是顶部对齐的。

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

这是一个视觉的jsFiddle：

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

我做错了什么？

Answer 1

我的理解以及它一直对我有用的方式是display: table-cell必须在div的另一个元素（如display: table）内。

示例：

http://jsfiddle.net/495Rm/

示例代码：

div#top{
    display:table;
    height:100px;
    border:1px solid red;
}

div#top{
    display:table-cell;
    vertical-align:middle;
}

Answer 2

以下是我的评论中的解决方案：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;
}

如果重要，因为它在IE7中不起作用。这是一个固定版本：http://jsfiddle.net/gARYk/27/

Answer 3

jsfiddle.net/gARYk/10 ....这就是你要找的东西。