Table Of Content
CSS text-align Tutorial with Examples
View more Tutorials:
Follow us on our fanpages to receive notifications every time there are new articles.
Facebook
Twitter
The CSS text-align property is used for a block element or a table cell to align its contents horizontally.
/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;
/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;
| Value | Description |
| left | Align the content of an element to the left. |
| right | Align the content of an element to the right |
| center | Align the content of an element to the center. |
| justify | Try to adjust spacing between words (or inline contents) so that each line has the length equal to the width of the current element, except for the last line. |
The default value of CSS text-align depends on the direction of the element. If the element's direction is "Left-to-Right", the default value of CSS text-align is left, whereas if the direction of the element is "Right-to-Left", the default value of CSS text-align is right.
text-align-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS text-align</title>
<meta charset="UTF-8"/>
<style>
#my-div {
background-color: #eee;
min-height: 135px;
padding: 5px;
text-align: left;
}
#my-div span {
background-color: yellow;
}
</style>
<script>
function changeTextAlign(event) {
var textAlign = event.target.value;
var div = document.getElementById("my-div");
div.style.textAlign = textAlign;
}
</script>
</head>
<body>
<h1>CSS text-align</h1>
<input type="radio" name="my-radio" value="left" onclick="changeTextAlign(event)" checked/> Left<br>
<input type="radio" name="my-radio" value="right" onclick="changeTextAlign(event)"/> Right<br>
<input type="radio" name="my-radio" value="center" onclick="changeTextAlign(event)"/> Center<br>
<input type="radio" name="my-radio" value="justify" onclick="changeTextAlign(event)"/> Justify<br>
<hr/>
<div id = "my-div">
Apollo 11 was the spaceflight that landed the first humans,
Americans <span>Neil Armstrong</span> and <span>Buzz Aldrin</span>,
on the Moon on July 20, 1969, at 20:18 UTC.
<span>Armstrong</span> became the first to step onto the lunar
surface 6 hours later on July 21 at 02:56 UTC.
<span>Armstrong</span> spent about three and a half two
and a half hours outside the spacecraft,
<span>Aldrin</span> slightly less; and together they
collected 47.5 pounds (21.5 kg) of lunar material
for return to Earth. A third member of the mission,...
</div>
</body>
</html>
When CSS text-align applies to an element, it works with all the inline contents of this element, for example, text content, child elements such as <span>, etc. But it doesn't has an effect on the child block elements of the current element.
See the following example:
- The DIV1 element is established CSS text-align:center.
- The DIV2 element is the child of DIV1, but DIV2 is not affected by CSS text-align:center.
text-align-example2.html
<!DOCTYPE html>
<html>
<head>
<title>CSS text-align</title>
<meta charset="UTF-8"/>
<style>
#div1 {
background-color: #eee;
min-height: 135px;
padding: 5px;
text-align: left;
}
#div1 span {
background-color: yellow;
}
#div2 {
background-color: yellow;
width: 180px;
height: 50px;
padding: 5px;
margin-top: 10px;
}
</style>
<script>
function changeTextAlign(event) {
var textAlign = event.target.value;
var div1 = document.getElementById("div1");
div1.style.textAlign = textAlign;
}
</script>
</head>
<body>
<h1>CSS text-align</h1>
<input type="radio" name="my-radio" value="left" onclick="changeTextAlign(event)" checked/> Left<br>
<input type="radio" name="my-radio" value="right" onclick="changeTextAlign(event)"/> Right<br>
<input type="radio" name="my-radio" value="center" onclick="changeTextAlign(event)"/> Center<br>
<input type="radio" name="my-radio" value="justify" onclick="changeTextAlign(event)"/> Justify<br>
<hr/>
<p style="font-style:italic;color:red;">
CSS text-align cannot align child block elements.
</p>
<div id = "div1">
Apollo 11 was the spaceflight that landed the first humans,
Americans <span>Neil Armstrong</span> and <span>Buzz Aldrin</span>,
on the Moon on July 20, 1969, at 20:18 UTC.
<span>Armstrong</span> became the first to step onto the lunar
surface 6 hours later on July 21 at 02:56 UTC.
<span>Armstrong</span> spent about three and a half two
and a half hours outside the spacecraft,
<span>Aldrin</span> slightly less; and together they
collected 47.5 pounds (21.5 kg) of lunar material
for return to Earth. A third member of the mission,...
<div id = "div2">
I am div2, A block element.
</div>
</div>
</body>
</html>
Example: Use CSS margin:auto.
margin-auto-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS margin:auto</title>
<meta charset="UTF-8"/>
<style>
.div1 {
background-color: #eee;
min-height: 135px;
padding: 5px;
text-align: center;
}
.div2 {
background-color: yellow;
width: 180px;
height: 50px;
padding: 5px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>CSS margin:auto</h1>
<hr/>
<div class = "div1">
I am div1 {text-align: center;}
<div class="div2" style="margin-left:auto;margin-right:auto;">
margin-left:auto;<br/>
margin-right:auto;
</div>
<div class="div2" style="margin-right:auto;">
margin-right:auto;
</div>
<div class="div2" style="margin-left:auto;">
margin-left:auto;
</div>
</div>
</body>
</html>
