So zentrieren Sie horizontal div innerhalb des übergeordneten div

114

Wie zentriere ich ein divhorizontal in seinem übergeordneten Element divmit CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>
html css Adler
quelle
1
Hier sind zwei einfache Methoden, um Divs innerhalb von Divs vertikal, horizontal oder beides zu zentrieren
Michael Benjamin

Antworten:

158

Ich gehe davon aus, dass das übergeordnete Div keine Breite oder eine breite Breite hat und das untergeordnete Div eine kleinere Breite hat. Im Folgenden wird der Rand für oben und unten auf Null gesetzt und die Seiten werden automatisch angepasst. Dies zentriert die div.

div#child {
    margin: 0 auto;
}
Mark Embling
quelle
@Kennzeichen. Wissen Sie, wie es in IE6 funktioniert? IE6 ist wirklich scheiße, aber es gibt immer noch einige Leute, die es benutzen.
Bakhtiyor
@ Bakhtiyor: Soweit ich mich erinnere, ist es so. Welche Probleme sehen Sie? Möglicherweise möchten Sie eine neue Frage öffnen, wenn Sie ein bestimmtes Problem haben, das zuvor noch nicht angesprochen wurde. Ich habe jedoch keinen Zugriff auf IE6, um dies zu überprüfen.
Mark Embling
3
@ Bakhtiyor: Nachdem ich tatsächlich darüber nachgedacht habe, denke ich, dass Sie in IE.old auch text-align: center;das parentDiv einstellen und es dann für das childeine wieder nach links (oder was auch immer) setzen müssen . Nicht sicher, ob dieses Problem IE6 betrifft ...
Mark Embling
@Mark & ​​@Bakhtiyor Aus irgendeinem Grund wurde mein childDiv in allen von mir überprüften IE-Versionen (IE6-8) scheinbar nach links verschoben - im Vergleich zu Browsern, die mehr Standards entsprechen. Und text-align: center;für die parentund text-align: left;für die childbehoben es für alle diese Versionen.
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>
James Goodwin
quelle
2
Diese Lösung unterstützt IE 6, aber vergessen Sie nicht text-align:left;, das #child div
Moak
1
text-align:centerzum Kind div oder zum Elternteil div?
Anish Nair
6

Nur aus Interesse, wenn Sie zwei oder mehr Divs zentrieren möchten (damit sie nebeneinander in der Mitte liegen), gehen Sie wie folgt vor: 

<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>
Paul Chris Jones
quelle
4

Sie können den Wert "auto" für den linken und rechten Rand verwenden, damit der Browser den verfügbaren Speicherplatz gleichmäßig auf beide Seiten des inneren Bereichs verteilt:

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