垂直对齐表格单元格不适用于绝对位置 [英] Vertical align table-cell don't work with position absolute

问题描述

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中进行了设置.

The text should be placed in the middle of my "table cell". Everything works as expected until I add "position: absolute". Now it can't place my content in the middle any more? Why not? It still knows my height and width because I set it in my CSS.

有什么聪明的解决方法吗?

Any clever workaround for this?

推荐答案

一切正常，直到我添加"position:absolute".现在它 不能再将我的内容放在中间了?为什么不呢?

Everything works as expected until I add "position: absolute". Now it can't place my content in the middle any more? Why not?

position: absolute强制display: block，在第二个此处阅读.

作为一种解决方法，我认为您必须将其包装在另一个元素中:

As for a workaround, I think you'll have to wrap it in another element:

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

这篇关于垂直对齐表格单元格不适用于绝对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！