Cara memusatkan div horizontal di dalam div induk

114

Bagaimana cara memusatkan secara divhorizontal di dalam induknya divdengan CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>
html css Burung rajawali
sumber
1
Berikut adalah dua metode sederhana untuk memusatkan div dalam div, secara vertikal, horizontal, atau keduanya (CSS murni): stackoverflow.com/a/31977476/3597276
Michael Benjamin

Jawaban:

158

Saya mengasumsikan div induk tidak memiliki lebar atau lebar, dan div anak memiliki lebar yang lebih kecil. Berikut ini akan mengatur margin atas dan bawah menjadi nol, dan sisi-sisinya secara otomatis pas. Ini memusatkan div.

div#child {
    margin: 0 auto;
}
Tandai Embling
sumber
@Menandai. Apakah Anda tahu cara membuatnya bekerja di IE6? IE6 sangat menyebalkan, tetapi masih ada beberapa orang yang menggunakannya.
Bakhtiyor
@Bakhtiyor: sejauh yang saya ingat, memang begitu. Masalah apa yang Anda lihat? Anda mungkin ingin membuka pertanyaan baru jika ada beberapa masalah khusus yang Anda alami yang belum pernah disentuh sebelumnya. Saya tidak memiliki akses ke IE6 untuk diperiksa.
Mark Embling
3
@Bakhtiyor: sebenarnya setelah memikirkannya, saya pikir di IE.old Anda juga perlu mengatur text-align: center;pada parentdiv dan kemudian mengaturnya kembali ke kiri (atau apa pun) untuk yang childsatu. Tidak yakin apakah masalah itu menimpa IE6 ...
Mark Embling
@ Mark & ​​@Bakhtiyor untuk beberapa alasan saya mengalami childdiv saya tampaknya bergeser ke kiri - dibandingkan dengan browser yang lebih memenuhi standar - di semua versi IE yang saya periksa (IE6-8). Dan text-align: center;untuk parentdan text-align: left;untuk childmemperbaikinya untuk semua versi itu.
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
sumber
2
Solusi ini mendukung IE 6, tetapi jangan lupa untuk menambahkan text-align:left;#child div
Moak
1
text-align:centerke div anak atau div induk?
Anish Nair
6

Hanya karena minat, jika Anda ingin memusatkan dua div atau lebih (sehingga keduanya berdampingan di tengah), berikut cara melakukannya: 

<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
sumber
4

Anda dapat menggunakan nilai "auto" untuk margin kiri dan kanan agar browser mendistribusikan ruang yang tersedia secara merata di kedua sisi div bagian dalam:

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