text-align
The text-align CSS property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box.
CSS
JS
object.style.textAlign = "value";
Values
<'text-align'> = start | end | left | right | center | justify | match-parent | justify-all
start
Inline-level content is aligned to the start edge of the line box.
end
Inline-level content is aligned to the end edge of the line box.
left
Inline-level content is aligned to the line left edge of the line box.
right
Inline-level content is aligned to the line right edge of the line box.
center
Inline-level content is centered within the line box.
justify
Text is justified according to the method specified by the text-justify property, in order to exactly fill the line box.
match-parent
Behaves the same as inherit except that an inherited value of start or end is interpreted against the parent's direction value and results in a computed value of either left or right.
justify-all
Sets both text-align-all and text-align-last to justify, forcing the last line to justify as well.
Initial
start
end
<!doctype html>
<html>
<head>
<style>
p {
text-align: end;
}
p:nth-of-type(2) {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end</p>
<p>end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end</p>
</body>
</html>
left
<!doctype html>
<html>
<head>
<style>
p {
text-align: left;
}
p:nth-of-type(2) {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left</p>
<p>left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left</p>
</body>
</html>
right
<!doctype html>
<html>
<head>
<style>
p {
text-align: right;
}
p:nth-of-type(2) {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right</p>
<p>right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right</p>
</body>
</html>
center
<!doctype html>
<html>
<head>
<style>
p {
text-align: center;
}
p:nth-of-type(2) {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center</p>
<p>center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center</p>
</body>
</html>
justify
<!doctype html>
<html>
<head>
<style>
p {
text-align: justify;
}
p:nth-of-type(2) {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify</p>
<p>justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify</p>
</body>
</html>
match-parent
<!doctype html>
<html>
<head>
<style>
p {
text-align: match-parent;
}
p:nth-of-type(2) {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent</p>
<p>match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent</p>
</body>
</html>
justify-all
<!doctype html>
<html>
<head>
<style>
p {
text-align: justify-all;
}
p:nth-of-type(2) {
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all</p>
<p>justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all justify-all</p>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
p:nth-of-type(2) {
writing-mode: vertical-lr;
}
</style>
<script>
function mouseover(value) {
var elements = document.getElementsByTagName("p");
for (var i = 0; i < elements.length; ++i) {
elements[i].style.textAlign = value;
}
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="start">
<input onmouseover="mouseover(value)" type="button" value="end">
<input onmouseover="mouseover(value)" type="button" value="left">
<input onmouseover="mouseover(value)" type="button" value="right">
<input onmouseover="mouseover(value)" type="button" value="center">
<input onmouseover="mouseover(value)" type="button" value="justify">
<input onmouseover="mouseover(value)" type="button" value="match-parent">
<input onmouseover="mouseover(value)" type="button" value="justify-all">
<p>text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align</p>
<p>text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align</p>
</body>
</html>
Internal
External