Centered Object Using Onion Skinned Drop Shadow
The object below is centered through the addition of a wrapping div ("#center")which carries a width of 1% and pushes itself half the available distance from the right side by applying a right margin of 50%. Additionally, to compensate for the object's width creating an off-center displacement, it must be repositioned to the right a distance equal to half it's own width. To do this, give all three inner divs position:relative (this placates IE/Win which misplaces the top right corner if only .wrap1 receives position:relative); then, set .wrap1's right position to 50%. You're done.
HTML:
<div id="center"> <div class="wrap1"> <div class="wrap2"> <div class="wrap3"> <img src="images/ball.jpg" alt="demo" /> </div> </div> </div> </div>
CSS:
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
position:relative;
}
.wrap1 {
float:left;
background:url(shadow.gif) right bottom no-repeat;
right:50%;
}
.wrap2 {
background:url(corner_bl.gif) left bottom no-repeat;
}
.wrap3 {
padding:0 8px 8px 0;
background:url(corner_tr.gif) right top no-repeat;
}
#center {
width: 1%;
margin-left:50%;
}
Tested on…
- IE 6 (Win 2K)
- Mozilla 1.5 (Win 2K)
- Netscape 7.0 (Win 2K)
- Opera 7.03 (Win 2K)
- IE 5.1 (Mac OS9)