親div内で水平方向にdivを中央揃えする方法

114

どのように私は中央んdiv、親の内側に水平にdivしてCSS？

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

html css

— 鷲
ソース

1

ここでは、中心のdivに2つの簡単な方法は、水平、垂直、divタグ内にある、またはその両方（純粋なCSS）：stackoverflow.com/a/31977476/3597276

— マイケル・ベンジャミン

158

親divに幅がないか幅が広く、子divの幅が狭いと想定しています。次の例では、上部と下部のマージンをゼロに設定し、側面を自動的に合わせます。これにより、divが中央に配置されます。

div#child {
    margin: 0 auto;
}

— マーク・エンブリング
ソース

@マーク。IE6で動作させる方法を知っていますか？IE6は本当にひどいですが、それでもそれを使っている人がいます。

— Bakhtiyor 2011

@Bakhtiyor：私が覚えている限りでは、そうです。どのような問題が発生していますか？以前に触れられていない特定の問題が発生している場合は、新しい質問を開いてください。確認するためにIE6にアクセスできません。

— Mark Embling、2011

3

@Bakhtiyor：実際にそれについて考えていたので、IE.old text-align: center;ではparentdiv を設定してから、divを左（または何でも）に戻す必要がありますchild。その問題がIE6に

— 影響を与える

@Mark＆@Bakhtiyor何らかの理由で、私がchildチェックしたIEのすべてのバージョン（IE6-8）で、標準に準拠しているブラウザーと比較して、divが左にシフトしているように見えました。そしてtext-align: center;用parentとtext-align: left;するためにはchild、すべてのこれらのバージョンのためにそれを修正しました。

— Brookmarker

7

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

— ジェームズ・グッドウィン
ソース

2

このソリューションは、IE 6サポートしていますが、追加することを忘れないでくださいtext-align:left;#child divのに

— Moak

1

text-align:center子divまたは親divに？

— Anish Nair 2013年

6

ちょうど興味があって、2つ以上のdivを中央に配置したい場合（中央に並べて配置する場合）は、次のようにします。

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

— ポール・クリス・ジョーンズ
ソース

4

左マージンと右マージンに「auto」値を使用して、ブラウザーが使用可能なスペースを内側のdivの両側に均等に配分できるようにします。

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

— x4u
ソース

2

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

— ソフィアン・ハッソー
ソース