Menyiarkan semula pemusatan mendatar dan menegak imej saiz yang tidak diketahui dalam bekas saiz yang diketahui (2)_Pertukaran pengalaman

Ini ialah contoh pemusatan mendatar dan menegak bagi imej yang tidak diketahui saiznya dalam bekas dengan saiz yang diketahui Tajuk asal: "Memusatkan imej yang tidak diketahui saiznya dalam bekas luar yang diketahui saiznya", pengarang: Stu Nicholls form: http://www.cssplay.co.uk/menu/centered.html , diterbitkan pada 15 Oktober 2006.

Artikel ini telah diterjemahkan dan diterbitkan oleh forestgan pada 2006-10-17 Lebih banyak artikel.

Contoh pemusatan mendatar dan menegak ini boleh berfungsi seperti biasa dalam IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape dan dua set gaya ringkas ditulis untuk IE dan bukan IE.

IE menggunakan blok sebaris, bukan IE menggunakan sel jadual dan penjajaran menegak.

CSS

/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8; 
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}<br><!--[if IE]>
<style type="text/css">
/* vertical align for IE */
#edge {width:0; height:100%; display:inline-block; vertical-align:middle;} 
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->

xhtml

<div class="holder"><br><span id="edge"></span> <br><span id="container"><img src="graphics/homework.jpg" alt="" /></span><br></div><br>

Contoh pengarang adalah satu saya memanjangkannya untuk memasukkan 6 gambar pada satu halaman, yang boleh digunakan dalam album foto dan paparan produk Alamat demo.