CSS - 垂直对齐表格单元格不工作与位置绝对 [英] CSS - Vertical align table-cell don't work with position absolute

问题描述

http://jsfiddle.net/fQv97/

HTML

 < div class =table-cell> 
我的文本，应该对齐中间
< / div> 
  

CSS

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

问题

文本应该放在我的表格单元格的中间。一切正常工作，直到我添加位置：绝对。现在它不能把我的内容在中间了吗？为什么不？它仍然知道我的高度和宽度，因为我在我的CSS中设置它。

这个任何聪明的解决方法？

解决方案

一切正常，直到我添加position：absolute。现在它
不能把我的内容在中间了吗？为什么不呢？

position：absolute ：block ，请阅读第二个此处。 / p>

至于解决方法，我想你必须将它包装在另一个元素：

 < div class =table-cell-wrapper> 
< div class =table-cell> 
我的文本，应该对齐中间
< / div> 
< / div> 
 
 .table-cell-wrapper {
 position：absolute; 
} 
 .table-cell {
 height：200px; 
 width：200px; 
 vertical-align：middle; 
 background：#eee; 
 display：table-cell; 
} 
  

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

Problem

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?

解决方案

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 forces display: block, read number two here.

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

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