HTML and CSS Reference
In-Depth Information
headings and paragraphs. Unlike using alignments in individual elements, however,
<div>
is used to surround a block of HTML tags of any kind, and it affects all the tags
and text inside the opening and closing tags. Two advantages of
div
over the
align
attribute follow:
You need to use
<div>
only once, rather than including
align
repeatedly in several
different tags.
n
You can use
<div>
to align anything (headings, paragraphs, quotes, images, tables,
and so on); the
align
attribute is available on only a limited number of tags.
n
To align a block of HTML code, surround it with opening and closing
<div>
tags, and
then include the
align
attribute in the opening tag. As in other tags,
align
can have the
value
left
,
right
, or
center
:
<h1 align=”left”>
Serendipity Products
</h1>
<div align=”right”>
<h2><a href=”who.html”>
Who We Are
</a></h2>
<h2><a href=”products.html”>
What We Do
</a></h2>
<h2><a href=”contacts.html”>
How To Reach Us
</a></h2>
</div>
All the HTML between the two
<div>
tags will be aligned according to the value of the
align
attribute. If individual
align
attributes appear in headings or paragraphs inside the
<div>
, those values will override the global
<div>
setting.
Note that
<div>
itself isn't a paragraph type; it's just a container. Rather than altering the
layout of the text itself, it just enables you to apply your own styles to the text and tags
inside. One function of
<div>
is to change text alignment with the
align
attribute. It's
also often used with CSS to apply styles to a specific block of text (much like its coun-
terpart,
<span>
). In fact, to center elements within the
<div>
the CSS way (instead of
using the deprecated
align
attribute), you can use the
text-align
property. Valid values
for it are
left
,
right
,
center
, and
justify
. Figure 7.14 shows how it's used.
Input
▼
<div style=”text-align: left”>
Left aligned text.
</div>
<div style=”text-align: right”>
Right aligned text.
</div>
<div style=”text-align: center”>
Centered text.
</div>
<
div style
=
”text-align: justify”
>This text is justified. I'm adding some extra
text for padding so that you can see exactly how the justification works. As you
can see, the text is expanded so that it is aligned with both the left and right
margins.<
/div
>
