一個老生常談的問題，很多時候我都是用js去擷取內容高度然後margin-top：-height/2來實現，今天鬼使神差的常試用的css解決，但發現除了IE8外，其它的瀏覽器都可以，感謝群裡的AY童鞋協助解決IE8的問題，原來IE8已經支援display:table,display:table-cell了。
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">* { padding:0; margin:0;}ul { list-style:none; margin:100px auto; width:500px;}li { width:100px; height:200px; float:left; margin-right:10px; border:1px solid #000;display:table; *display:block; zoom:1;}li span {display:table-cell; vertical-align:middle; *position:relative; top:50%;*display:block; width:100% ; text-align:center;}li span strong {margin:0 auto; *position:relative; top:-50%; display:block;}</style></head><body><ul><li><span><strong>Surprise double take Surprise double take</strong></span></li> <li><span><strong><img src="images/close_lightbox.jpg" alt="" title="" /></strong></span></li> <li><span><strong><img src="images/wp-logo.png" alt="" title="" /></strong></span></li></ul></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
