14.1. Aligning Text

Multiple properties in CSS can be used to align text, both horizontally and vertically. This section covers the various properties used to align text to other elements around it.

14.1.1. Horizontal Alignment

The text-align property can be used to align text horizontally using four different values/styles: left (default), right, center, and full. Consider the following code and the results shown in Figure 14-1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <style type="text/css">
    p { border: thin solid black; padding: 10px; }
    p.left { text-align: left; }
    p.right { text-align: right; }
    p.center { text-align: center; }
    p.full { text-align: justify; }
  </style>
</head>
<body>
<h2>Left Aligned (default)</h2>
<p class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h2>Right Aligned</h2> <p class="right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h2>Center Aligned</h2> <p class="center">Lorem ipsum dolor sit amet, consectetuer ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP 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.

Start your free trial