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

WBOY
Lepaskan: 2016-05-16 12:09:24
asal
1654 orang telah melayarinya

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]-->
Salin selepas log masuk

xhtml

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

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan