html - 在 td 中对齐 div

Question

我想通过 CSS 对齐 td 中的以下 div 元素。我有：

<table>
<tr>
<td style="width:300px;height:300px">

<div id="div1">hor+ver center alignment</div>
<div id="div2">top right</div>
<div id="div3">bottom left</div>

</td>
</tr>
</table>

你能帮我准备一个样式表吗？我已经尝试过内联块显示，但没有一个好的结果。

谢谢！

Answer 1

好的，这可能有点矫枉过正，但它是：首先我建议你用另一个包装它们div只是为了有更多的控制权

<table>
<tr>
<td style="width:300px;height:300px">
<div class="wrapper">
<div id="div1">hor+ver center alignment</div>
<div id="div2">top right</div>
<div id="div3">bottom left</div>
</div>
</td>
</tr>
</table>

然后是样式：

.wrapper {
    position: relative;
    height:100%;
    text-align: center;
}
.wrapper:after {
    height:100%;
    content:'';
    display: inline-block;
    vertical-align: middle;
}
#div1,#div2,#div3 {
    display: inline-block;
}
#div1 {
    vertical-align: middle;
}
#div2 {
    position:absolute;
    top: 0;
    right: 0;
}
#div3 {
    position:absolute;
    bottom: 0;
    left: 0;
}

vertical-align:middle我个人喜欢并经常使用的技巧，以及一些绝对定位。

这是演示http://jsfiddle.net/pavloschris/vVHvd/

Answer 2

喜欢这个jsFiddle 示例吗？

#div1 {
    text-align:center;
}
#div2 {
    position:absolute;
    top:0;
    right:0;
}
#div3 {
    position:absolute;
    bottom:0;
    left:0;
}
td, table {
    border:1px solid #999;
}
td {
    position:relative;
}

Answer 3

如果不知道第一个 div 的宽度，就不可能动态设置水平对齐。它应该自动垂直居中。

对于其余部分，您可以使用absolute定位，如下所示：

<td style="width:300px;height:300px;position: relative;">

<div id="div1">hor+ver center alignment</div>
<div id="div2" style="position: absolute;top: 0px;right: 0px;">top right</div>
<div id="div3" style="position: absolute;bottom: 0px;left: 0px;">bottom left</div>

</td>