css – 如果图像宽于其容器,如何对其进行居中?

前端之家收集整理的这篇文章主要介绍了css – 如果图像宽于其容器,如何对其进行居中?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
通常,您可以使用display:block; margin:auto,但如果图像大于容器,它会溢出到右边。如何让它平均地溢出到双方?容器的宽度是固定的和已知的。图像的宽度未知。

解决方法

HTML
​<div class="image-container">
  <img src="http://www.google.com/images/logo.gif" height="100" />
</div>​

CSS

.image-container {
    width: 150px;
    border: solid 1px red;
    margin:100px;
}

.image-container img {
    border: solid 1px green;
}

jQuery

$(".image-container>img").each(function(i,img) {
    $(img).css({
        position: "relative",left: ($(img).parent().width() - $(img).width()) / 2
    });
});

看到它在jsFiddle:http://jsfiddle.net/4eYX9/30/

猜你在找的CSS相关文章