HTML Cookbook Basic HTML Course

It's Easy!


Alternate Version

CSS Alignment

Before we move on to CSS positioning, we should briefly discuss alignment in CSS. Alignment is related to position since it allows you to specify placement of content in an element.

We are already familiar with alignment attributes in (X)HTML. The attributes are align and valign. They can be used in many elements (tags), such as div, p, table, td and img.


The HTML Attributes and their Values (review)

The align attribute aligns the contents of an element (tag) horizontally (left to right). The values for align are left (default), center and right.

The valign attribute aligns the contents of an element (tag) vertically (top to bottom). The values for valign are top, middle (default) and bottom.


Some HTML Examples

<div style="text-align:center">
...
</div>

centers whatever is in the div. If you put a table in the div, everything in the table will also be centered.


<p align="center">
...
</p>

centers a paragragh on a page or in a div.


<img align="center" ... />
centers an image on a page or an element that contains the image.


<table align="center">
...
</table>

centers a table on a page or in a div.


<td align="center" valign="top">
...
</td>

will center a cell's content and places it at the top.


<td align="center" valign="bottom">
...
</td>

will center a cell's content and places it at the bottom.


CSS Alignment Properties

In CSS, the text-align property aligns the contents of an element (tag) horizontally (left to right), including non-text content such as images (there is no image-align property). This property should have been called horizontal-align. It replaces HTML's align. It has the same values as align.

The vertical-align attribute aligns the contents of an element (tag) horizontally (top to bottom). It replaces HTML's valign. Vertical-align may only be used in the image element.

When we get to positioning, we will learn how to place an image anywhere on a page, rather than just positioning one in text.

Support for vertical-align is sporadic. In the list of values below, I'll use letters to show which browsers support which values:

I = Internet Explorer 6
F = Firefox
N = Nestcape 7.2
W = WebTV.

The values for vertical-align are:

Each of these values is displayed in the next section. When a value is not supported, the bottom of the text aligns with the bottom of the image. SS indicates an MSIE screenshot.


Vertical-align Examples



style="vertical-align:top"

There is an image mallrat in this sentence.



style="vertical-align:text-top"

There is an image mallrat in this sentence.



style="vertical-align:middle"

There is an image mallrat in this sentence.



style="vertical-align:bottom" (SS)

There is an image mallrat in this sentence.



style="vertical-align:text-bottom"

There is an image mallrat in this sentence.



style="vertical-align:super" (SS)

There is an image mallrat in this sentence.



style="vertical-align:sub" (SS)

There is an image mallrat in this sentence.



style="vertical-align:baseline" (SS)

There is an image mallrat in this sentence.



Assignment

Use text-align and/or vertical-align on a page. Post your page.

Happy coding!
Gnubee

Links
Tips
Tools
References
Rules
HTML Help Gnubee - Newsgroup
HTML Course Contents (Home)

Valid XHTML 1.0!

Valid CSS!