錨定懸停狀態的未知尺寸的垂直/水平中心圖像

我試圖將具有未知尺寸的圖像（水平和垂直方向）居中。該圖像可能大於容器的尺寸（101x84），因此我需要使用max-width和max-height約束圖像。最後，如果用戶將鼠標懸停在圖像上，圖像需要懸停狀態，圖標將出現在容器的中間。錨定懸停狀態的未知尺寸的垂直/水平中心圖像

目前，我的代碼滿足以上所有要求，但我無法垂直對齊圖像。我嘗試了下面的其他指南，例如將img更改爲display:inline-block，但之後我鬆開了我的水平中心對齊。

如果可能，我寧可不使用JavaScript/jQuery，除非絕對必要。

2012-12-21 Jon

您能夠使用jQuery/JavaScript的？ – ntgCleaner

我寧可不使用jQuery/JS，除非這是絕對唯一的方法。 – Jon

你嘗試過使用display：table-cell with valign：middle and center？ – ntgCleaner

嘗試使用display:table-cell然後用vertical-align:middle，然後要麼margin:0 auto;或text-align:center

這應該做你的權利。

2012-12-21 04:45:56 ntgCleaner

我不能評論，所以我把這作爲一個單獨的答案。

display:table-cell不受IE7支持。所以，如果你要支持IE7你可以添加這使display:table-cell工作：

<!--[if lte IE 7 ]><table><td><![endif]--> 
<div>     
... 
</div> 
<!--[if lte IE 7 ]></td></table><![endif]-->

另外6種無需JavaScript的垂直居中的不同的方式在這裏討論：http://www.vanseodesign.com/css/vertical-centering/

2012-12-21 05:06:18 icramc

回答