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 1280×800 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

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.