html - 在div中居中图像

Question

我有一个正方形 <div> ( 70px x 70px ) 将包含可变尺寸(正方形、风景或肖像)的图像。我希望这张图片在 <div> 内对称居中.我如何得到它..？

<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; text-align:center;">
    <image src='.base_url("images/store/images/".$image->image).'  />
</div>

图片的实际大小可以大于70px x 70px .但它应该对称地位于中心。

我还必须让它跨浏览器兼容..帮助赞赏...

Answer 1

必须是 <img>元素？

您可以将图像设置为<div> 的背景与 background-position:center center - 这很容易做到，不使用 javascript 和跨浏览器..

像这样使用它:

<div class="img-polaroid" style="width: 70px; height: 70px; background:url('.base_url("images/store/images/".$image->image).') center center no-repeat black; text-align:center;"></div>

检查这个Working jsFiddle .在浏览器支持方面，我从未遇到过不支持此功能的浏览器。

它肯定会在:

• 网景 6+
• Mozilla 1+
• 火狐 1+
• Internet Explorer 4+
• 歌剧 3+
• Safari 1+