text-align: ***; vertical-align: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The text-align property specifies the horizontal text alignment, and the vertical-align property specifies the vertical alignment.

The text alignment in the cells can be specified by applying these properties to the TD or TH element.


td {
text-align: center;
vertical-align: top;
}
Property Value Explanation
text-align
(horizontal)		 left aligns to the left
center aligns to the center
right aligns to the right
justify justifies the text
vertical-align
(vertical)		 baseline aligns to the baseline
top aligns to the top
middle aligns to the middle
bottom aligns to the bottom

The justify value adjust the spaces between the words to justify both left and right side. (However, the last line is not justified.)

About the baseline
The baseline

Example

The horizontal alignment

<html>
<head>
<title>TAG index</title>

<style type="text/css">

table {
border: 2px #2b2b2b solid;
width: 100%;
height: 150px;
}
td {
border: 2px #2b2b2b solid;
width: 25%;
}

#example1 { text-align: left; }
#example2 { text-align: center; }
#example3 { text-align: right; }

</style>

</head>
<body>

<table>
<tr>
<td>The default</td>
<td id="example1">The left</td>
<td id="example2">The center</td>
<td id="example3">The right</td>
</tr>
</table>

</body>
</html>
Output
The default The left The center The right
The vertical alignment

<html>
<head>
<title>TAG index</title>

<style type="text/css">

table {
border: 2px #2b2b2b solid;
width: 100%;
height: 150px;
}
td {
border: 2px #2b2b2b solid;
width: 25%;
}

#example4 { vertical-align: top; }
#example5 { vertical-align: middle; }
#example6 { vertical-align: bottom; }

</style>

</head>
<body>

<table>
<tr>
<td>The default</td>
<td id="example4">The top</td>
<td id="example5">The middle</td>
<td id="example6">The bottom</td>
</tr>
</table>

</body>
</html>
Output
The default The top The middle The bottom
Justifies the text

<html>
<head>
<title>TAG index</title>

<style type="text/css">

table {
border: 2px #2b2b2b solid;
width: 100%;
}
td {
border: 2px #2b2b2b solid;
width: 50%;
}

#example7 { text-align: justify; }

</style>

</head>
<body>

<table>
<tr>
<td>This is example text ...</td>
<td id="example7">This is example text ...</td>
</tr>
</table>

</body>
</html>
Output
This is example text. The text-align property specifies the horizontal text alignment. The justify value adjust the spaces between the words to justify both left and right side. This is example text. The text-align property specifies the horizontal text alignment. The justify value adjust the spaces between the words to justify both left and right side.
Aligned to the baseline (Comparison with the "top" value)

<html>
<head>
<title>TAG index</title>

<style type="text/css">

table {
border: 2px #2b2b2b solid;
height: 100px;
}
td {
border: 2px #2b2b2b solid;
}

#example8 td { vertical-align: baseline; }
#example9 td { vertical-align: top; }

</style>

</head>
<body>

<table id="example8">
<tr>
<td>abcdefg</td>
<td>hijklmn</td>
<td style="font-size: 250%;">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>

<table id="example9">
<tr>
<td>abcdefg</td>
<td>hijklmn</td>
<td style="font-size: 250%;">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>

</body>
</html>
Output
abcdefg hijklmn opqrstu vwxyz
abcdefg hijklmn opqrstu vwxyz