3

次のように、テーブルセル内の3つのdivを揃えるのを手伝ってください:

ここに画像の説明を入力

テーブル セルの右上隅と左下隅に絶対配置された 2 つの小さな div。1 つの 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/

ありがとう

4

1 に答える 1

3

コードを少し整理しました。デモについては、 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
}​

ここで行われているのは、絶対配置されたスパンの背景を提供する相対包含ブロックがあるということです。div はセル全体を占めますが、その内容は中央に配置され、同じ効果が得られます。

于 2012-12-12T13:11:20.677 に答える