CHAPTER 9 ■ POSITIONING: ADVANCED
Center Offset
HTML
<h1>Center Offset</h1>
<div class="gp">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="zs" ><br />A sized static block can't be center offset.</div>
<div id="ss" class="ex"><span>Stretched Static Block → 40px</span></div>
<span id="za" class="ex"><span>Sized Absolute → 40px</span></span>
<span id="wa" >An element can't be shrinkwrapped if it is centered.</span>
<span id="sa" class="ex"><span>Stretched Absolute → 40px</span></span>
</div></div>CSS
.gp { position:relative; height:295px; width:600px; border:2px solid black; }
.parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; }
.ex { padding:5px; border:5px solid black; background-color:gold; }
.ex span { margin-left:-40px; }#zs { position:static; text-align:center; margin-top:5px;
width:auto; margin-left:90px; margin-right:10px; }
#ss { position:static; text-align:center; margin-top:5px;
width:auto; margin-left:90px; margin-right:10px; }
#za { position:absolute; text-align:center; top:0; margin-top:155px;
width:440px; left:80px; margin-left:auto; right:0; margin-right:auto; }
#wa { position:absolute; text-align:center; top:0; margin-top:200px;
width:auto; left:0; margin-left:110px; right:0; margin-right:30px; }
#sa { position:absolute; text-align:center; top:0; margin-top:245px;
width:auto; left:0; margin-left:110px; right:0; margin-right:30px; }