1

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>

このためのスタイルシートを準備するのを手伝ってくれませんか? インラインブロック表示で試してみましたが、良い結果が得られませんでした。

ありがとう！

4

3 に答える 3

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/があります

于 2013-02-26T16:49:21.457 に答える
0

この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;
}
于 2013-02-26T16:37:44.930 に答える
0

最初の 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>
于 2013-02-26T16:42:10.183 に答える