html - display：table-cellを使用しても、divの内容が垂直方向に中央に配置されない

Question

内の要素を垂直方向に中央揃えしようとしているので、 http：//www.w3.org/Style/Examples/007/center.en.htmldivに従って、、、を設定しましたが、内部のテキストはまだ上にあります-整列。min-heightvertical-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別の要素（のような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 ....これはあなたが探しているものです。