1

私は複数の子を持つ親divを持っていますhttp://jsfiddle.net/thiswolf/FUqSP/そして私は子を含む子の中で各divを垂直方向に中央に配置したいと思います。例えば私はchild_twoをchild_oneに中央に配置したいと思います。私はこれを持っていますcss

.parent{
width:300px;
height:300px;
background-color:orange;
display:table-cell;
vertical-align:middle;
}
.child_one{
width:100px;
height:100px;
background-color:purple;
margin-left:auto;
margin-right:auto;
}
.child_two{
width:50px;
height:50px;
background-color:pink;
margin-left:auto;
margin-right:auto;
}
.child_three{
width:25px;
height:25px;
background-color:yellow;
margin-left:auto;
margin-right:auto;
}
.child_four{
width:12px;
height:12px;
background-color:red;
margin-left:auto;
margin-right:auto;
}

これはhtmlです

<div class="parent">
<div class="child_one">
<div class="child_two">
<div class="child_three">
<div class="child_four">
</div>
</div>
</div>
</div>
</div>
4

4 に答える 4

1

各子にこれを追加します

位置：相対;
トップ：25％;

ここで完全なCSS、

.parent{
width:300px;
height:300px;
background-color:orange;
display:table-cell;

 }
.child_one{
width:100px;
height:100px;
background-color:purple;
margin-left:auto;
margin-right:auto;
 position: relative;
top: 25%;
}
.child_two{
width:50px;
height:50px;
background-color:pink;
margin-left:auto;
margin-right:auto;
 position: relative;
top: 25%;
}
.child_three{
width:25px;
height:25px;
background-color:yellow;
margin-left:auto;
margin-right:auto;
 position: relative;
top: 25%;
}
.child_four{
width:12px;
height:12px;
background-color:red;
margin-left:auto;
margin-right:auto;
 position: relative;
top: 25%;
}

ここでデモ：フィドル

于 2012-09-28T09:09:08.787 に答える
1

このリンクを確認してください

私はfloat:left;それを達成するために使用しました。

このフィドルをチェックしてください

これはパーセンテージを使用して行いました。
これを達成する他の方法については、このリンクを確認してください

これをパーセンテージで行うことをお勧めします。混乱することはありません。

于 2012-09-28T09:17:00.250 に答える
0

子の絶対位置を使用できます。各子を上50％と左50％に配置し、幅と高さの半分の負の上下マージンを与える必要があります。

.parent{
    width:300px;
    height:300px;
    background-color:orange;
    position: relative;
}
.child_one{
    width:100px;
    height:100px;
    background-color:purple;
    position:absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

これは最初の子供です。あなたはそれぞれの子供に同じことをしなければなりません。したがって、幅が50ピクセルの場合は、-25ピクセルのマージンを使用します。

http://jsfiddle.net/APdaP/

于 2012-09-28T09:07:53.377 に答える
0

以前のコメントで送信したリンクによると、次のソリューションを試してみてください。

Cssテーブルメソッド。

vertical-alignそれはあなたがあなたの子供divのために使うことができるようにあなたのdivをテーブルセルとして表示します。

于 2012-09-28T09:13:15.867 に答える