通常,您可以使用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/