在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

好的，這可能是一個矯kill過正的方法，但是這里是這樣的：首先，我建議您將它們包裝在另一個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>