html - 具有锚点悬停状态的未知大小的垂直/水平中心图像

Question

我正在尝试将具有未知尺寸的图像（水平和垂直）居中。这个图像可能比容器的大小（101x84）大，所以我需要用max-width和约束图像max-height。最后，图像需要具有悬停状态，如果用户将鼠标悬停在图像上，图标将出现在容器的中间。

目前，我的代码满足上述所有要求，除了我不能垂直对齐我的图像。我曾尝试遵循其他指南，例如将 img 更改为，display:inline-block但随后我失去了水平居中对齐。

如果可能，除非绝对必要，否则我宁愿不使用 javascript/jQuery。

http://jsfiddle.net/uNvSU/1/

Answer 1

尝试使用display:table-cell，然后使用vertical-align:middle，然后使用margin:0 auto;或text-align:center

那应该是对的。

Answer 2

我无法发表评论，所以我将其作为单独的答案。

display:table-cellIE7 不支持。因此，如果您必须支持 IE7，您可以添加以下内容以使其display:table-cell正常工作：

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

此处还讨论了六种不使用 javascript 的垂直居中方式：http ://www.vanseodesign.com/css/vertical-centering/