CHAPTER 19 ■ CALLOUTS AND QUOTESCenter Callout
Problem You want to remove content from the flow and display it prominently to the reader in the
center of the text with no content flowing to its left or right.
In general terms, you want an inline element to be rendered like a block element.
Solution A callout is removed from the normal flow and styled to make its content stand out to the
user. It usually has a larger font, margins, borders, and background to set it apart from
surrounding content. Callouts can include all kinds of content, such as quotes, key phrases,
attention getters, and so forth.
You can assign an inline element to the callout class. You can use display:block to
display the inline element as a block element. You can use width to set the callout’s width. If
content is wider than the width, a browser wraps the content and extends the height of the
callout. You can use margin-left:auto and margin-right:auto to center the callout. You
can use margin-top and margin-bottom to put space above the callout’s top border and
below its bottom border. You can use padding to put distance between the callout’s content
and its border. You can use position:relative and left to move it to the left or right of
center. Using a percentage in left is convenient because it is a percentage of the callout
container’s width.
Pattern^
HTML
CSS .callout { display:block; position:relative;^
width:+VALUE;
margin-top:+VALUE; margin-bottom:+VALUE;
left:±VALUE%; padding:+VALUE;
margin-left:auto; margin-right:auto; }
Location This pattern works on any element.
Limitations CSS 3 provides no automatic way to flow content on the left or right of a centered callout.
Thus, a centered callout extends across the entire width of its parent.
Tips A callout should be positioned in the text where it makes sense if it were read as part of the
text.
Related to Left Floating Callout, Right Floating Callout; Display, Block Box (Chapter 4); Width (Chapter
5); Margin, Padding (Chapter 6); Relative (Chapter 7); Offset Relative (Chapter 8); Center
Aligned (Chapter 9); Blocked (Chapter 11)