开发者

how to center an image without a fixed width

开发者 https://www.devze.com 2023-03-03 17:44 出处:网络
I am trying to center images that will not ha开发者_StackOverflow社区ve a fixed width as its a gallery with various image sizes so cannot use margin 0 auto as you need a fixed width for that.

I am trying to center images that will not ha开发者_StackOverflow社区ve a fixed width as its a gallery with various image sizes so cannot use margin 0 auto as you need a fixed width for that.

Is there a jquery solution?


Use this to center the images:

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

However, if the images are small enough in width to go side-by-side and fit in the wrapper, they will. You can get around this with extra markup like wrapper <div>s around the image or even <br />.

Demo: http://jsfiddle.net/wesley_murch/Cwed9/1/

Make sure to adjust the width in the demo to see what I mean.

EDIT: I was playing jsfiddle while this was answered in the comments :P


Hmm --

Are you saying the image is too large for the canvas? If so... have the canvas overflow:hidden;

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


try with this style

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

精彩评论

暂无评论...
验证码 换一张
取 消