CHAPTER 9 ■ POSITIONING: ADVANCED
Middle Offset
HTML
<h1>Middle Offset</h1>
<div class="gp"><div id="ia" class="ex1 ex2">INLINE</div>
<div id="za" class="ex1 ex2"><span>Sized Absolute</span></div>
<div id="wa" class="ex1">Can't middle-offset a static element
or a shrinkwrapped element.</div>
<div id="sa" class="ex1 ex2"><span>Stretched Absolute</span></div></div>CSS
.gp { position:relative; height:300px; width:700px; border:2px solid black; }
.ex1 { width:120px; padding:5px; text-align:center; border:1px dotted black; }
.ex2 { position:relative; border:5px solid black; background-color:gold; left:0; }
.ex1 span { height:36px; left:0; width:130px;
position:absolute; top:0; margin-top:auto; bottom:0; margin-bottom:auto; }#ia { height:100px; top:60px; margin-top:auto; bottom:-60px; margin-bottom:auto;
position:absolute; line-height:100px; margin-left:40px; }
#za { height:100px; top:60px; margin-top:auto; bottom:-60px; margin-bottom:auto;
position:absolute; margin-left:200px; }
#wa { height:auto; top:0; margin-top:150px; bottom:0; margin-bottom:30px;
position:absolute; margin-left:355px; }
#sa { height:auto; top:0; margin-top:150px; bottom:0; margin-bottom:30px;
position:absolute; margin-left:510px; }