CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED
Aligned and OffsetAbsolute cont.Example Each absolute element in the example is shrinkwrapped. Each could be sized without
affecting the alignment or the offset. The centered element is discussed in the next design
pattern—Aligned-center Absolute. I included it in the example because it’s a combination
of all four of these design patterns.Related to Sized, Shrinkwrapped (Chapter 5); Margin (Chapter 6); Positioned, Closest Positioned
Ancestor, Absolute, Fixed (Chapter 7); all design patterns in Chapter 9; Text Replacement,
Screenreader Only (Chapter 10); Left Marginal, Right Marginal (Chapter 13); Content-over
Image, Content-over Background Image (Chapter 14); Flyout Menu (Chapter 17); Marginal
Dropcap, Marginal Graphic Dropcap (Chapter 18); Left Marginal Callout, Right Marginal
Callout (Chapter 19); Popup Alert, Graphical Alert, Left Marginal Alert, Right Marginal Alert
(Chapter 20)Aligned-center Absolute
HTML
<h1>Aligned-center Absolute</h1>
<div>
<p id="cm" class="hc vc">Horizontally & Vertically Centered</p>
</div>CSS
div { position:relative; }
#cm { position:absolute; }.hc { width:200px; left:0; margin-left:auto; right:0; margin-right:auto; } .vc { height:40px;
top:0; margin-top:auto; bottom:0; margin-bottom:auto; }/* Nonessential rules are not shown. */