Jak wyśrodkować div
poziomo wewnątrz jego rodzica div
z CSS
?
<div id='parent' style='width: 100%;'>
<div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>
Jak wyśrodkować div
poziomo wewnątrz jego rodzica div
z CSS
?
<div id='parent' style='width: 100%;'>
<div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>
Odpowiedzi:
Zakładam, że nadrzędny element DIV nie ma szerokości ani dużej szerokości, a element podrzędny ma mniejszą szerokość. Poniższe instrukcje ustawią marginesy na górze i na dole na zero, a boki tak, aby pasowały automatycznie. To skupia div.
div#child {
margin: 0 auto;
}
text-align: center;
na parent
div, a następnie ustawić go z powrotem do lewej (lub cokolwiek) do child
jednego. Nie jestem pewien, czy ten problem dotyczy IE6 ...
child
div pozornie przesunięte w lewo - w porównaniu do przeglądarek, które są bardziej zgodne ze standardami - we wszystkich wersjach IE, które sprawdziłem (IE6-8). I text-align: center;
dla parent
i text-align: left;
dla child
naprawiono to dla wszystkich tych wersji.
<div id='parent' style='width: 100%;text-align:center;'>
<div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>
text-align:left;
do div
text-align:center
do elementu DIV dziecka czy DIV nadrzędnego?
Po prostu z ciekawości, jeśli chcesz wyśrodkować dwa lub więcej elementów div (tak, aby znajdowały się obok siebie w środku), oto jak to zrobić:
<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>
Możesz użyć wartości „auto” dla lewego i prawego marginesu, aby przeglądarka rozdzieliła dostępne miejsce równomiernie po obu stronach wewnętrznego elementu div:
<div id='parent' style='width: 100%;'>
<div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>
<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>