如何在没有固定宽度的情况下居中图像

Question

我试图将不具有固定宽度的图像居中作为具有各种图像尺寸的图库,因此不能使用边距0自动,因为您需要固定宽度.

有jquery解决方案吗？

Answer 1

使用它来居中图像:

.wrapper { /* your wrapper element */
    text-align:center;   
}
.wrapper img {
    display:inline-block;   
}

但是,如果图像的宽度足够小以便并排放入包装中,它们就会.您可以使用额外的标记来解决这个问题,例如<div>图像周围的包装器甚至是<br />.

演示:http://jsfiddle.net/wesley_murch/Cwed9/1/

确保在演示中调整宽度以查看我的意思.

编辑:我在播放jsfiddle,而评论中回答:P

Answer 2

唔 -

您是说图像对于画布来说太大了吗？如果是这样...画布溢出：隐藏；

if (image-width > canvas-width){
   offset = image-width - canvas-width;
   offset = offset / 2;
   image.left = -offset;
}