center 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 wander if there's any way to center the image. Know of any?

Edit: page here.

Answer 1

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.

Answer 2

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