web-dev-qa-db-ja.com

垂直位置合わせテーブルセルは絶対位置では機能しません

http://jsfiddle.net/fQv97/

[〜＃〜] html [〜＃〜]

<div class="table-cell">
    My text, should be align middle
</div>

[〜＃〜] css [〜＃〜]

.table-cell {
    height: 200px;
    width: 200px;
    vertical-align: middle;
    background: #eee;
    display: table-cell;
    position: absolute;
}

問題

テキストは「テーブルセル」の中央に配置する必要があります。 「position：absolute」を追加するまで、すべてが期待どおりに機能します。これで、コンテンツを途中に配置できなくなりましたか？何故なの？ CSSで設定したので、高さと幅は引き続き認識されます。

このための賢い回避策はありますか？

cssvertical-alignmentcss-tables
25
Jens Törnell

「position：absolute」を追加するまで、すべてが期待どおりに機能します。これで、コンテンツを途中に配置できなくなりましたか？何故なの？

position: absolute強制display: block、2番目に読む ここ 。

回避策については、別の要素でラップする必要があると思います。

<div class="table-cell-wrapper">
    <div class="table-cell">
        My text, should be align middle
    </div>
</div>

.table-cell-wrapper {
    position: absolute;
}
.table-cell {
    height: 200px;
    width: 200px;
    vertical-align: middle;
    background: #eee;
    display: table-cell;
}
40
thirtydot

位置の前にハッシュを追加するなど、これについて私が発見したいくつかの回避策があります：

#position: absolute;

そのハックはここで見つかりました： CSSの垂直方向の中央揃え

3
Matt K

ここに解決策があります：

<div style="position: absolute; /*your position*/">
    <div class="table-cell">
        My text, should be align middle
    </div>
</div>
3
FlashTrava