3

请帮我在表格单元格中对齐三个 div,如下所示:

在此处输入图像描述

两个小 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/

谢谢

4

1 回答 1

3

我清理了你的代码。有关演示,请参见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 占据整个单元格,但其内容居中,给您相同的效果。

于 2012-12-12T13:11:20.677 回答