html - 三个 div 定位在表格单元格内

Question

请帮我对齐表格单元格内的三个 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/

谢谢

Answer 1

我稍微清理了你的代码。参见 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
}​

这里发生的事情是你有一个相对包含 block ，它为绝对定位的跨度提供了背景。 div 占据整个单元格，但其内容居中，效果相同。