Center an image in a div too small for it?

Question

So I have a div in my body that's a percentage width, and inside that a div with inline style as follows:

text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden;

As you can see, I have text-align: center; on, which would, if the image was small enough for the div, center the image. But the percentage width div is definitely not going to be big enough on my 1280x800 screen.

The negative margins are to overcome some padding on it's parent div. The overflow:hidden makes things look like I want, not messy. So, it's kind of working like I want it, like the header image at onenaught.com. It will become more visible on the right as you make the browser wider, but not expand from both sides, because it's not centered.

So, I wonder if there's any way to center the image. Know of any?

Edit: page here.

Answer 1

You can actually do this by setting the margin-left and margin-right on the image to -100%.

Here's a jsFiddle demonstrating this. (use the one below instead, it's better)

It is an even better idea to set the margin-left and margin-right on the image to a much larger negative number, e.g. -9999%, as with the -100% value, the image starts to move off-center as soon as the div's containing element becomes less wide than 3 times the width of the div:

margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width

You can check the difference in behaviour between this jsFiddle and the previous one by toggling the overflow to visible and resizing the result window to less than 300% of the width of the div.

Quoting @MaxOriola on the range of supported browsers (from the comments):

I've retested second fiddle ... in Firefox, Chrome, Safari (last versions) and Explorer 8, 9, 10. Works fine in all of them.

Note: Image element has to be displayed inline or inline-block and centered horizontally with text-align: center (on wrapper element).

// ALL of the JS below is for demonstration purposes only

$(document).ready(function() {
  $('a').click(function() {
    $('body > div').toggleClass('overflow');
  });
})

img {
  margin: 0 -9999% 0 -9999%;
}


/* ALL of the CSS below is for demonstration purposes only */

body {
  text-align: center;
  font-family: verdana;
  font-size: 10pt;
  line-height: 20pt;
}

body>div {
  margin: 0px auto;
  width: 40%;
  background-color: lightblue;
  overflow: hidden;
}

img {
  vertical-align: top;
}

.overflow {
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>40% wide div [<a href="#">toggle overflow</a>]
  <div>
    <img src="http://via.placeholder.com/400x200" />
  </div>
  400px wide image
</div>

Answer 2

One option would be to absolutely position the image with left: 50% and then use a negative margin-left on the image equal to half of the image's width. Of course, this requires the containing div to have its positioning set to relative or absolute in order to provide the proper container type for the image to be absolutely positioned within.

The other option (and probably better) is instead of using an image tag, just set the image as the background for the parent div, and use the background positioning CSS attributes to center it. Not only does this make sure it's centered without forcing absolute positioning, but it also automatically crops overflow, so the overflow attribute isn't necessary.