text-align
Aligns text horizontally: left, right, center, or justified.
- Initial value
start- Inherited
- Yes
- Animatable
- no
- Applies to
- block containers
- JavaScript
element.style.textAlign = "center"
Example
#.cta {
text-align: center;
}<section class="cta stage" style="text-align: center;">
<h2 style="margin: 0">Ready for your first lesson?</h2>
<p style="margin: 6px 0 12px">Start for free, no card required.</p>
<button type="button">Start now</button>
</section>Definition and usage
#The text-align property sets the horizontal alignment of inline content inside a block: text, links, inline images, and inline-block elements. It doesn’t move the block itself, only what’s inside it, line by line.
The start and end values depend on the writing direction: in English, start means the left side, and in Arabic the right side. That way the layout adapts to the language on its own. justify stretches the lines so they touch both edges.
To center a block itself (not the text inside it), use auto margins, or Flexbox and Grid.
Syntax
#text-align: start | end | left | right | center | justify;Values
#Values in practice
#start
.demo { text-align: start; }center
.demo { text-align: center; }end
.demo { text-align: end; }justify
.demo { text-align: justify; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Align long paragraphs to the left. Centered and justified text is harder to read, and justifying creates gaps between words.
- Use
startandendinstead ofleftandrightif the site has versions in right-to-left languages.
Related entries
#Spotted a mistake or missing an example? Write to us.