HTML and CSS Reference
In-Depth Information
Aligning Text
In addition to table borders and striping, the alignment of text within cells, both horizontal
and vertical, plays an integral role in table formatting. Names, descriptions, and so forth
are commonly flush left, while numbers and other figures are flush right. Other informa-
tion, depending on its context, may be centered. We can move text horizontally using the
text-align
property in CSS, as we covered in
Lesson 6
, “
Working with Typography
.
”
To align text vertically, however, the
vertical-align
property is used. The
vertical-align
property works only with inline and table-cell elements—it won't
work for block, inline-block, or any other element levels.
The
vertical-align
property accepts a handful of different values; the most popular
values are
top
,
middle
, and
bottom
. These values vertically position text in relation to
the table cell, for table-cell elements, or to the closest parent element, for inline-level ele-
ments.
By revising the HTML and CSS to include the
text-align
and
vertical-align
properties, we can clean up the layout of our table of books. Note that the data within the
table becomes much clearer and more digestible (see
Figure 11.10
).
Search WWH ::
Custom Search