I ran into an interesting problem yesterday while building a simple web page. I needed to cause the main image at the top of the page to do two things: 1) Be centered on a liquid layout page, so that no matter what size the window the image was centered. 2) "Float" above the design on it’s own z-index.
Of course to get the image to be on it’s own layer, it must be set to position:absolute; but once you give it an absolute position it loses all references to being centered.
I thought I had the solution at one point, until I tested it in IE and it was all wrong. After a few hours of struggling, I finally came up with what now seems like a simple solution:
Adding styles to the image itself was my mistake. In this case I had to wrap the image with a div and give it an id. I then applied the following styles to that div in my stylesheet:
#image {
position:absolute;
width: 100%;
text-align: center;
}
The image itself doesn’t need any other styles.
Subscribe to
I think you could have alternatively used
margin: 0 auto;not sure if it can be applied directly to an image or not
Thanks for the suggestion Joe. I did try that. It didn’t work.
hi i’m having the same problem but im not familiar with that block of code, could you write it out in full. not your whole page, but the DIV wrapping etc. whatever makes it work. thanks,
Ros
Thanks, you solved my search!
Thanks so much – I’ve been wrestling with this for a couple of days, off & on. I know I knew this a few months ago – AH, THE RELIEF OF SOLVING THE MYSTERY!!!! Thanks.
Awesome! Solved my problem, thanks so much!
Dude, I ow you a beer. If you ever visit belgium.
thanks
yo .. thanks you helped me out with that one!
thanks for the tip. It worked like a charm!
Amazing, this has been baffling me for so long! Thank you!
thank you so much! just spent a half hour trying to figure this one out and finally gave up and searched … nifty solution!
This worked fine on Firefox and IE 8, but in order to make it work on earlier IE versions I needed to add a magic “clearfix” div right after the div containing the centered image.
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
For the origins of clearfix and pointer to newer stuff, see
http://www.positioniseverything.net/easyclearing.html
Donna