How to Vertically Align Text with CSS & HTML

HTML and CSS both offer solutions for the vertical alignment of text.

Issues with text alignment can cause major headaches when one is creating web content, whether using HTML, CSS or both. Several methods may be used in either web language to deal with the issue. Fortunately, vertically aligning text is neither difficult nor complicated.

Instructions

With HTML

1. Create a table, using the <table> tags.

2. Create rows within the <table> tags using <tr> tags.

3. Create cells within the <tr> tags using <td> tags.

4. Insert your text into the table's various cells. The text in each cell will automatically be vertically aligned with the text in the corresponding cells of other rows in the table. If you seek only to align the text to the same vertical line, you may stop here. If you seek to align the text to a top line, continue to Step 5.

5. Enclose the text in <align="top"></align> tags. This must be done within each individual cell. The "align" property can alternately be added to the <td> tag.

With CSS

1. Scroll to your document's CSS code within the source code of your CSS document (or the head of your HTML file).

2. Add the "vertical-align" property to areas affecting your text.

3. Give the value "top" to the property.