Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Centering Image with Z-Index in a Resizable Window?

Centering Image with Z-Index in a Resizable Window?

Problem

My images were centering perfectly until I decided to place an image behind another and use z-index. I was using relative positioning, but after moving to absolute, it aligns to the left.

How can I center it, even if window is resized?

Heres my code in a jsfiddle:http://jsfiddle.net/WJPhz/

HTML

CSS

#sign {
    cursor: pointer;
    max-width: 241px;
    position:absolute;
}

#numbers {
    cursor: pointer;
    max-width: 241px;
    position:absolute;
}

Javascript

$(document).ready(function() {
     $('#sign').hide().delay(1000).fadeIn(3000);
     $('#numbers').hide().delay(2000).fadeIn(3000);

     $("#sign").click(function() {
            $('#sign').fadeOut(3000);
    });
});
Problem courtesy of: KingPolygon

Solution

Try this one maybe this can help http://jsfiddle.net/markipe/WJPhz/1/

CSS

left:50%;
margin-left: -120px; /*div width divide by 2*/
Solution courtesy of: Markipe

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Centering Image with Z-Index in a Resizable Window?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×