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 example ？

#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>

在td内对齐div

3 个答案: