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

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;
}

Answer 3

尝试这种风格

HTML

<div>
    <img src="" height="155px" width="155px" style="float:left">
</div>

CSS

img {  
    display: table-cell; // this says treat this element like a table cell
    vertical-align:middle;   
}