Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have a div with width:100px and height:100px (say) Inside that, there is just an image, for which height is always fixed to 100px.

I want to make the image horizontally center.

Here there are 3 cases:

  1. image's width is equal to div's width, no issues
  2. image's width is less than div's width, I can use margin: auto here
  3. image's width is more than div's width

I want the center part of the image to be visible inside the div.

means, if image's width is 120px.. and as div's width is 100px and overflow:hidden I want image's 10th px to 110th px to be visible (so, the left 10px and right 10px of image are hidden under the div )

Is this possible through some CSS property? (I dont know the width of image which is loading! so I want it to be dynamic. Also want to avoid javascript side calculations to find the extra amount of width and giving margin-left: -ve value bla bla.. )

Also, I can't give the image as background-image for the div!

share|improve this question

1 Answer 1

up vote 26 down vote accepted

See: http://jsfiddle.net/thirtydot/x62nV/ (and without overflow: hidden to easily see the centering)

This will work in all browsers, with the possible exception of IE6.

For .imageContainer > span, the margin-left is derived from the width, and the width is an arbitrary number which controls the maximal image width that will be supported. You could set width: 10000px; margin-left: -4950px; to support really wide images, if required.

HTML:

<div class="imageContainer">
    <span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>

CSS:

.imageContainer {
    border: 1px solid #444;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 15px;
    text-align: center;
}
.imageContainer > span {
    display: block;
    width: 1000px;
    margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
    display: inline-block;
}
share|improve this answer
    
Thanks @thirtydot! by adding these below 2 properties, am able to achieve vertical align center also for the small images (when compared to div) .imageContainer{ line-height:100px; } .imageContainer > span > img { vertical-align:middle; } :-) –  SuryaPavan Nov 16 '11 at 11:32
1  
Great answer, nice usage of jsfiddle :D –  Benji XVI Dec 7 '11 at 13:39
    
Awesome answer!! –  tanathos Feb 19 at 15:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.