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.
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.
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>
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.
<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 >
Search WWH ::

Custom Search