Aligning image to center inside a smaller div

by

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

More Related Contents:

  1. My inline-block elements are not lining up properly
  2. How can I select the last element with a specific class, not last child inside of parent?
  3. How to make CSS3 rounded corners hide overflow in Chrome/Opera
  4. Responsively change div size keeping aspect ratio [duplicate]
  5. Minimum and maximum value of z-index?
  6. Why media queries has less priority than no media queries css
  7. Flexbox fill available space vertically
  8. Outline radius?
  9. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  10. Easier way to create circle div than using an image?
  11. Customizing Increment Arrows on Input of Type Number Using CSS
  12. How can I make a display:flex container expand horizontally with its wrapped contents?
  13. Remove outline from select box in FF
  14. How to wrap text of HTML button with fixed width?
  15. What’s default HTML/CSS link color?
  16. masking image with CSS
  17. Absolute position and Overflow:hidden
  18. CSS: stretching background image to 100% width and height of screen?
  19. Can overflow:hidden affect layout?
  20. How to insert spaces/tabs in text using HTML/CSS
  21. What is the ::content/::slotted pseudo-element and how does it work?
  22. How to remove/ignore :hover css style on touch devices
  23. How do I create a teardrop in HTML?
  24. How do I remove background-image in css?
  25. Style a checkbox in firefox — remove check and border
  26. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  27. Why would Google use a font tag?
  28. Styling the “ element in CSS?
  29. inline-block element with no text renders differently
  30. Sizing flex items on the last row

Leave a Comment