The text-align property specifies the horizontal text alignment.
p {
text-align: center;
}
| Property | Value | Explanation |
|---|---|---|
| text-align | left | aligns to the left |
| center | aligns to the center | |
| right | aligns to the right | |
| justify | justifies the text |
The justify value adjust the spaces between the words to justify both left and right side. (However, the last line is not justified.)
Aligns to the left, center, and right
<html> <head> <title>TAG index</title> <style type="text/css"> #example1 { text-align: left; } #example2 { text-align: center; } #example3 { text-align: right; } </style> </head> <body> <p id="example1">Aligns to the left</p> <p id="example2">Aligns to the center</p> <p id="example3">Aligns to the right</p> </body> </html>
Aligns to the left
Aligns to the center
Aligns to the right
Justifies the text
<html> <head> <title>TAG index</title> <style type="text/css"> #example4 { width: 40%; border: 1px #c0c0c0 solid; text-align: left; } #example5 { width: 40%; border: 1px #c0c0c0 solid; text-align: justify; } </style> </head> <body> <p id="example4">This is example text ...</p> <p id="example5">This is example text ...</p> </body> </html>
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.