Saya telah mencari pertanyaan lain dan, sementara masalah ini tampaknya mirip dengan beberapa orang lain, tidak ada yang saya lihat sejauh ini untuk mengatasi masalah yang saya alami.
Saya memiliki div yang berisi sejumlah div lainnya, yang masing-masing melayang ke kiri. Div ini masing-masing berisi foto dan keterangan. Yang saya inginkan hanyalah grup foto dipusatkan di dalam div yang berisi.
Seperti yang dapat Anda lihat dari kode di bawah ini, saya sudah mencoba menggunakan keduanya overflow:hidden
dan margin:x auto
pada div induk, dan saya juga menambahkan clear:both
(seperti yang disarankan dalam topik lain) setelah foto. Sepertinya tidak ada yang membuat perbedaan.
Terima kasih. Saya menghargai saran apa pun.
<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
<h4>Section Header</h4>
<div style="margin: 2em auto;">
<div style="float: left; margin: auto 1.5em;">
<img src="photo1.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo2.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo3.jpg" /><br />
Photo Caption
</div>
<div style="clear: both; height: 0; overflow: hidden;"> </div>
</div>
</div>
Jawaban:
Pertama, hapus
float
atribut padadiv
s. Lalu, letakkantext-align: center
di bagian luar utamadiv
. Dan untuk batindiv
, gunakandisplay: inline-block
. Mungkin juga bijak untuk memberi mereka lebar eksplisit juga.sumber
Dengan Flexbox Anda dapat dengan mudah secara horizontal (dan vertikal) memusatkan anak yang melayang di dalam div.
Jadi jika Anda memiliki markup sederhana seperti ini:
dengan CSS:
(Ini HASIL (yang diharapkan - dan tidak diinginkan) )
Sekarang tambahkan aturan berikut ke pembungkus:
dan anak-anak yang melayang mendapatkan pusat selaras ( DEMO )
Hanya untuk bersenang-senang, untuk mendapatkan perataan vertikal juga cukup tambahkan:
DEMO
sumber
Saya mencapai hal di atas menggunakan posisi relatif dan mengambang ke kanan.
Kode HTML:
CSS:
JSFiddle: http://jsfiddle.net/MJ9yp/
Ini akan bekerja di IE8 dan lebih tinggi, tetapi tidak lebih awal (kejutan, kejutan!)
Sayangnya, saya tidak ingat sumber metode ini, jadi saya tidak bisa memberikan kredit kepada penulis aslinya. Jika ada orang lain yang tahu, silakan kirim tautannya!
sumber
Solusi berikut ini tidak menggunakan blok inline. Namun, membutuhkan dua div pembantu:
sumber
display: inline-block;
tidak akan berfungsi di browser IE mana pun. Inilah yang saya gunakan.sumber
Larutan:
sumber
Dalam kasus saya, saya tidak bisa mendapatkan jawaban oleh @ Sampson untuk bekerja untuk saya, paling-paling saya mendapat satu kolom yang dipusatkan pada halaman. Namun dalam prosesnya, saya belajar bagaimana float benar-benar bekerja dan menciptakan solusi ini. Pada intinya perbaikannya sangat sederhana tetapi sulit ditemukan sebagaimana dibuktikan oleh utas ini yang telah memiliki lebih dari 146 ribu tampilan pada saat posting ini tanpa menyebutkan.
Yang diperlukan hanyalah total jumlah lebar ruang layar yang akan ditempati tata letak yang diinginkan, lalu buat induk sama lebar dan terapkan margin: otomatis. Itu dia!
Elemen-elemen dalam tata letak akan menentukan lebar dan tinggi div "luar". Ambil setiap "myFloat" atau lebar atau tinggi elemen + batas + margin dan bantalannya dan tambahkan semuanya bersama-sama. Kemudian tambahkan elemen-elemen lain bersama-sama dengan cara yang sama. Ini akan memberi Anda lebar induk. Semuanya bisa berukuran agak berbeda dan Anda bisa melakukan ini dengan lebih sedikit atau lebih banyak elemen.
Mis. (Setiap elemen memiliki 2 sisi sehingga batas, margin, dan bantalan dapat dikalikan x2)
Jadi elemen yang memiliki lebar 10px, batas 2px, margin 6px, padding 3px akan terlihat seperti ini: 10 + 4 + 12 + 6 = 32
Kemudian tambahkan semua lebar total elemen Anda menjadi satu.
Dalam contoh ini lebar untuk div "luar" adalah 112.
sumber