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 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.
<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.
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.
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.
style="vertical-align:top"
There is an image
in this sentence.
style="vertical-align:text-top"
There is an image
in this sentence.
style="vertical-align:middle"
There is an image
in this sentence.
style="vertical-align:bottom" (SS)
There is an image
in this sentence.
style="vertical-align:text-bottom"
There is an image
in this sentence.
style="vertical-align:super" (SS)
There is an image
in this sentence.
style="vertical-align:sub" (SS)
There is an image
in this sentence.
style="vertical-align:baseline" (SS)
There is an image
in this sentence.
Use text-align and/or vertical-align on a page. Post your page.
Happy coding!
Gnubee