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

Question

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

<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它必须位于另一个元素（如 a 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 .... 这就是你要找的。