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.

demo

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…

Return to article