HTML Reference

Alignment

There are five different alignment models in HTML, and not all parameters are supported in each model. CSS is more commonly used to align models, as it uses just the basic text-align (horizontal contained elements) and vertical-align.

Alignment Outside the Box
Text Alignment Inside a Containing Box
Horizontal Alignment of Block Element
Horizontal Alignment in Table Cell
Vertical Text Alignment Inside an Element

Alignment Outside the Box

This refers to the text surrounding the rectangle bearing the align attribute. The W3C only sanctions some of the various align attribute values.

top
middle
right
bottom
left

The extended values where introduced to deal with the problem of ascenders and descenders on letters. Ascenders are the parts of a character that extend above the top line (e.g. L). Descenders are the parts of a character that extend below the base line (e.g. y). As such, the above attributes align to the top and base line.

Text Alignment Inside a Containing Box

This is perhaps the most obvious use of align, but center is prominent in its absence from the W3C supported values. This is more a case of moving alignment to CSS then doing it in the HTML.

top
left
bottom
right

Horizontal Alignment of a Block Element

By default block elements size to fit or expand through the containing box. A width has to be set, and the element contained in a full width block.

Horizontal Text Alignment in Table Cell

This works in much the same way as horizontal alignment of text in a contained box, except that justify is not honoured by some browsers. If you wish to use justify then wrap the text in a p tag.

Vertical Alignment of Text

Vertical alignment of text gets a special attribute; the valign attribute, the attribute values are top, middle and bottom.

Conclusion

It is probably best to use CSS alignment technique than to rely on the HTML align and valign attributes of elements. Most text browsers use sensible alignment defaults so very little is gained in using alignment in these instances, but this is perhaps the only time you really should consider aligning in HTML.

Add a Comment - CyberVisor - Concept Visor

Bookmark and then activate Concept Visor to comment on this page, or any other page on the web. The Concept Visor also allows you to view comments made on the page.

Concept Visor

Links

If you have found this site useful please consider linking to it @ http://html.poisedsolutions.com/

Social BookMarks

Site Designed & Developed by Poised Solutions

If you wish to discuss hiring Poised Solutions for an information technology (IT project please get in contact
or visit the main PoisedSolutions IT Consultancy Website.
Poised Solutions is based in the Thames Valley area of the UK.