HTML and CSS Reference
In-Depth Information
text-align
Initial value:
start
| Inherited: Yes | Applies to: Block Containers | CSS2.1
Browser support: IE 3+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
By using
text-align
, you can align content to the left, right, or center of its parent; in addition, you can make
that content justified, meaning flush to both sides of the parent. The CSS2.1 specification describes the values
left
,
right
,
center
, and
justify
to be used with
text-align
and an initial “nameless” value that acts as
left
if
the direction of text is left to right or
right
if the text direction is right to left (for languages such as Arabic and
Hebrew).
For the sake of completeness CSS Level 3 introduces two new values,
start
and
end
, with
start
replacing the “nameless” initial value of
text-align
.
start
and
end
achieve the exact same results as
left
and
right
but make more sense when used in conjunction with differing directions of text,
start
being whatever
side the text starts from and
end
being the opposite. However,
start
and
end
are currently supported only in Fire-
fox, Chrome, and Safari. Until support improves, it's best just to work with the CSS2.1 values:
left
,
right
,
cen-
ter
, and
justify
.
1.
In styles.css, add a declaration to the
p + .offer
rule set to make the text centered:
text-align: center;
2.
Add a declaration to the
blockquote
rule set to make the text justified:
text-align: justify;
3.
Save styles.css.
As shown in Figure 11-8, the offer text is now centered relative to its containing parent element, and the customer
testimonial is justified, spaced out to touch the edges of its containing parent.
