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;
}
精彩评论