Center An Image In A Div Too Small For It?

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: hid

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

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

Solution 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.

Solution 3:

Using css transform, for an image inside a container with overflow: hidden and a set width:

img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block; /* optional */
}

jsFiddle here (I borrowed part of Mathijs Flietstra's jsFiddle, so thanks).

Solution 4:

consider using the image as a background ;)

use background-position to get what you want.

you may need a javascript solution to achieve consistent cross-browser results

Solution 5:

I have found another solution

<styletype="text/css">.container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-100%; 
        width:300%;
     }
     .image{
        width: 800px; //your image size 
     }           
</style>

and in body

<divclass="container"><divclass="containerSecond"><imagesrc="..."class="" /></div></div>

This will center your image whenever your container is bigger or smaller. In this case your image should be bigger than 300% of container to not be centered, but in that case you can make with of containerSecond bigger, and it will work