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/
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"> </script>
<center>
<div id="sign" style="z-index:1">
<img src="http://s9.postimg.org/bql0ikclb/dope.png" alt"">
</div>
<div id="numbers" style="z-index:0">
<img src="http://s9.postimg.org/z3j212sov/image.png" alt"">
</div>
</center>
#sign {
cursor: pointer;
max-width: 241px;
position:absolute;
}
#numbers {
cursor: pointer;
max-width: 241px;
position:absolute;
}
$(document).ready(function() {
$('#sign').hide().delay(1000).fadeIn(3000);
$('#numbers').hide().delay(2000).fadeIn(3000);
$("#sign").click(function() {
$('#sign').fadeOut(3000);
});
});
Try this one maybe this can help http://jsfiddle.net/markipe/WJPhz/1/
CSS
left:50%;
margin-left: -120px; /*div width divide by 2*/