CSS text-align Tutorial
View more Tutorials:
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>