Jak wyśrodkować element div w poziomie w nadrzędnym div

114

Jak wyśrodkować divpoziomo wewnątrz jego rodzica divz CSS?

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

html css

— Orzeł
źródło

1

Oto dwie proste metody wyśrodkowania elementów div w elementach div, w pionie, poziomie lub w obu (czysty CSS): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

158

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;
}

— Mark Embling
źródło

@Znak. Czy wiesz, jak sprawić, by działał w IE6? IE6 naprawdę jest do bani, ale nadal niektórzy z niego korzystają.

— Bakhtiyor,

@Bakhtiyor: o ile pamiętam, tak. Jakie problemy widzisz? możesz otworzyć nowe pytanie, jeśli masz jakiś konkretny problem, który nie został wcześniej poruszony. Nie mam jednak dostępu do IE6, żeby to sprawdzić.

— Mark Embling,

3

@Bakhtiyor: faktycznie konieczności myślenia o tym, myślę, że w IE.old trzeba także zestaw text-align: center;na parentdiv, a następnie ustawić go z powrotem do lewej (lub cokolwiek) do childjednego. Nie jestem pewien, czy ten problem dotyczy IE6 ...

— Mark Embling,

@Mark & @Bakhtiyor z jakiegoś powodu moje childdiv 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 parenti text-align: left;dla childnaprawiono to dla wszystkich tych wersji.

— brookmarker

8

<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
źródło

2

To rozwiązanie obsługuje IE 6, ale nie zapomnij dodać text-align:left;do div

— #child

1

text-align:centerdo elementu DIV dziecka czy DIV nadrzędnego?

— Anish Nair

6

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>

— Paul Chris Jones
źródło

4

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>

— x4u
źródło

2

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

— Soufiane Hassou
źródło