The text-align property specifies the alignment of text and
images within the content area of a line. It can
align the em boxes of text (and image content boxes) to the left side of the line box or
to the right
side of the line box; it can center the string of em boxes (along with image
content boxes) on the line, and it can justify text. To
justify text, the word spacing is increased so that the
beginning and ending of the text (or images) on each line is aligned to the left and right
side.
The text-align property can be applied to block-level
elements and table cells. It can take the keywords left, center,
right, justify and inherit. It is an inherited
property. In all major browsers for English, text is left-aligned by default.
Note: The text-align property cannot be directly applied to
inline elements.
text-align:left
text-align:left on an element aligns the last em box's (or
image box's) left
edge to the left edge of the content area on each line, without changing the
word spacing of the line. All the remaining em boxes (and image boxes) on the
line are positioned with their left edge against the right edge of the
previously positioned em box. Since text in English is already aligned to the
left by default, in English web pages, text-align:left is
only useful to override another text-align declaration on an element.
Example 1: <div style="text-align:right"><p class="test"
style="text-align:left"><span>the</span> <span>quick</span> <span>brown</span>
<span>fox</span> <span>jumps</span> <span>over</span> <span>the</span>
<span>lazy</span> <span>dog.</span> <span>The</span> five boxing wizards jump
quickly.</p></div>
In the above example, the text-align declaration on the
<p> overrides the text-align declaration on the div and
left-aligns the text in <p>.
text-align:right
text-align:right on an element aligns the last em box's (or
image box's) right
edge to the right edge of the content area on each line, without changing the
word spacing of the line. All the remaining em boxes (and image boxes) on the
line are positioned with their right edge against the left edge of the
previously positioned em box.
Example 2: <p style="font-size:35px;font-family:'Times New
Roman';text-align:right"><span>the</span>
<span>quick</span> <span>brown</span> <span>fox</span> <span>jumps</span>
<span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span>
<span>The</span> five boxing wizards jump quickly.</p>
In the above example, the right edge of the last em box of each line is aligned to the right edge of the content area. The word spacing is not altered.
text-align:center
text-align:center adjusts the postion of the em boxes (and image
boxes), without
changing the word spacing, in such a way that the amount of space between the
left edge of the first em box (or image box) and the left edge of the content area is equal to
the amount of space between the right edge of the last em box (or image box) and the right edge
of the content area.
Example 3: <p style="font-size:35px;font-family:'Times New
Roman';text-align:center"><span>the</span> <span>quick</span> <span>brown</span>
<span>fox</span> <span>jumps</span> <span>over</span> <span>the</span>
<span>lazy</span> <span>dog.</span> <span>The</span> five boxing wizards jump
quickly.</p>
In the above example, the string of em boxes of each line is centered on the line with equal space to the left and the right.
text-align:justify
text-align:justify on an element aligns the first em box's
(or image box's) left
edge to the left edge of the content area and the last em box's (or image
box's) right edge to
the right edge of the content area on each line by equally increasing the word spacing of
the text on the line (if necessary).
All major browsers justify text by increasing the word spacing, they do not alter the letter spacing.
All major browsers justify the text in an element only when the text (and images) span more than one line.
If an element has both a word-spacing length declaration
and word-spacing:justify, then the browser ignores the
word-spacing declaration and increases the word spacing (if necessary) in order to
justify the text.
Note that the actual amount of additional word spacing between individual pairs of words (or images) may differ between browsers, but the sum of the added spacing is the same for a particular line of text, for a particular width of the content area.
Example 4: <p class="test" style="text-align:justify"><span>the</span>
<span>quick</span> <span>brown</span> <span>fox</span> <span>jumps</span>
<span>over</span> <span>the</span> <span>lazy</span> <span>dog.</span>
<span>The</span> five boxing wizards jump quickly.</p>
In the above example, the word spacing between words is increased such that there is no space between the left and right edges of the content area and the first and last em boxes (or image boxes) of each line.
text-align:inherit
text-align:inherit is used to override another text-align
declaration that has been applied to an element, and to restore the default
behavior of inheriting the parent element's text alignment.
Internet Explorer 6 and Internet Explorer 7 do not support
text-align:inherit, they ignore the declaration.
Conclusion
The text-align:inherit declaration should be avoided because
Internet Explorer 6 and Internet Explorer 7 ignore it.
All the other keywords of text-align are fully supported in all
major browsers.
No comments:
Post a Comment