CHAPTER 19 ■ CALLOUTS AND QUOTES
Center Callout
HTML
<h1>Center Callout</h1><p><code>display:block</code> clears text on each side of the callout. <code>
width</code> sets the callout's width. <code>margin-top</code> and <code>
margin-bottom</code> set the distance above and below the center callout.<span class="callout">Centered Callout!</span><code>margin-left:auto</code> and <code>margin-right:auto</code> center the
callout in its parent terminal block element.<code>position:relative</code>
and <code>left</code> adjust the horizontal position of the callout
away from center.</p>CSS
.callout { display:block; width:300px; margin:20px auto; padding:6px;
position:relative; left:0%;
font-size:22px; line-height:normal; font-weight:bold;
text-align:center; color:black; background-color:gold;
border-left:1px solid black; border-right:1px solid black;
border-top:6px solid black; border-bottom:6px solid black; }