0

別のdiv要素内でdiv要素を水平方向に整列させることmargin: 0 auto;は、両方が以外の幅プロパティを持っている限り達成できますautoが、これは垂直方向の整列には適用されません。

divを別のdiv内に垂直に配置するにはどうすればよいですか？

4

2 に答える 2

6

これには、さまざまなアイデアに基づいて、さまざまなアプローチがあります。要素の高さが固定されている場合（px、％、または何がありますか）、これまでに見つけた最善の解決策は、次の原則に基づいています。

親divposition: relative;と子divposition: absolute;を指定して、子を親に対して絶対位置に配置します。

子の場合は、、、topおよびをにbottom設定します。子にも固定があり、それが親のサイズよりも小さいことを考えると、これはブラウザを不可能な状況に追いやることになります。leftright0widthheight

margin: auto;ブラウザの救世主として、子供がやってくる。ブラウザは、子要素がそのサイズを維持できるようにすべての側に十分なマージンを追加できるようになりましたが、、、、およびに設定されているためtop、親全体を埋めることができます。bottomleftright0

TADAAA！要素は、親内で垂直方向と水平方向に整列されます。

マークアップ

<div class="parent">
    <div class="child"></div>
</div>

CSS

​.parent {
    width: 200px;
    height: 200px;
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
}

実例

http://jsfiddle.net/sg3Gw/

于 2012-07-04T17:10:41.670 に答える
1

これがjsfiddledisplay:table-cell; vertical-align:middle;を使用するのが最も簡単だと思います

<style>
.a {
    border:1px solid red;
    width:400px;
    height:300px;
    display:table-cell;
    vertical-align:middle;
}
</style>
<div class="a">
    <div>CENTERED</div>
</div>
​
于 2012-07-04T17:15:47.747 に答える