Horizontally Aligning Block Elements

You also learned to create a centered box in the previous chapter by setting equal left and right margins outside of the box; you can also right-align the box by setting the right margin to zero. There are some limitations, however, in these two approaches:

  • The text-align property doesn't actually horizontally align an element relative to the page, but only horizontally aligns text or other objects nested within an element relative to an element's content area.

  • Setting equal left and right margins to center a boxed element only works if the width of the element's content area is unspecified or set to auto (the default).

✓ You've already worked with some examples in this book of horizontally aligning text and ...

Get Cascading Style Sheets (CSS) by Example now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.