text-align: ***;
| Browser |
|
|---|
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.)
Example
<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>
- Output
-
Aligns to the left
Aligns to the center
Aligns to the right
<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>
- 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.