首頁 > 開發者 > JavaScript
CSS如何?圖片上下垂直置中，css圖片上下置中
CSS如何?圖片上下垂直置中:
建議:儘可能的手寫代碼，可以有效提高學習效率和深度。
在很多時候需要將圖片上下垂直置中，不過沒有一個直接了當的屬效能夠實現此功能。當然實現圖片上下垂直置中的方法有多重，下面就簡單介紹一下其中的兩種。
方法一:
使用margin方式，使圖片在div中上下垂直置中。margin-top值的計算方式是:div的高度/2-圖片高度/2。
代碼執行個體如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">div { height:400px; width:400px; border:1px solid red;}div img {margin-top:127px;}</style></head><body><div><img src="mytest/demo/border.jpg" alt="螞蟻部落"></div></body></html>
方式二:
代碼執行個體如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">div { height:400px; width:400px; border:1px solid red; vertical-align:middle; display:table-cell;}</style></head><body><div><img src="mytest/demo/border.jpg" alt="螞蟻部落" /></div></body></html>
以上代碼實現了圖片上下垂直置中，不過IE7瀏覽器並不支援此方式。
實現方式在div中添加了如下代碼:
vertical-align:middle;display:table-cell;line-height:400px;
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4614
更多內容可以參閱:http://www.softwhy.com/divcss/
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
