表格单元格内的三个div定位
表格单元格内的三个div定位
提问于 2012-12-12 20:58:20
请帮助我将表格单元格内的三个div对齐，如下所示：
两个小div绝对位于表格单元格的右上角和左下角。一个div应该在表格单元格内垂直和水平居中。根据单元格的高度，较小的div应该能够与居中的div重叠。
我成功地对齐了中央分区。但是我不知道如何实现小的div。
<div style=" #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; text-align: center; width:inherit; height:inherit;">
<div style=" #position: relative; #top: -50%; margin-left: auto; margin-right: auto; background-color: green ">
first line<br>
second line
</div>
</div> 这里是我目前所拥有的：http://jsfiddle.net/zm2WW/5/
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-12-12 21:11:21
我清理了一下你的代码。有关演示，请参阅http://jsfiddle.net/zm2WW/12/。
下面是中间的表格单元格现在的样子：
<table>
<tr>
<td>
</td>
<td>
<div class="containingBlock">
<span class="topSpan">TopSpan</span>
<div class="centerCell">text</div>
<span class="bottomSpan">2</span>
</div>
</td>
<td></td>
</tr>
</table>和你的CSS：
td {
border: 1px solid;
width: 200px;
height: 75px;
}
div, span {
border: 1px solid black;
}
.containingBlock {
display: table;
height: 100%;
position: relative;
vertical-align: middle;
width: 100%;
}
.centerCell {
display: table-cell;
vertical-align: middle;
width: 100%;
}
.topSpan {
position: absolute;
top: 0;
}
.bottomSpan {
bottom: 0;
right: 0;
position: absolute;
right: 0
}这里发生的事情是，您有一个相对包含块，它为绝对定位的跨度提供了背景。div占据了整个单元格，但它的内容居中，给您带来了同样的效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13840345
复制相关文章
相似问题
腾讯云开发者
