text-align controls how lines of text sit inside their box.
index.html
HTML
<style>
p { background: #fdf2e9; padding: 8px; margin: 6px 0; }
.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }
.j { text-align: justify; }
</style>
<p class="l">Left aligned. This is the default for languages written left to right.</p>
<p class="c">Centered text works well for short headings and buttons.</p>
<p class="r">Right aligned text, handy for prices in a table column.</p>
<p class="j">Justified text stretches each line to fill the width. It can leave big gaps between words, so use it with care, especially in narrow columns.</p>Use start and end for multi-language sites
start and end follow the reading direction. In English start is the left edge. In Arabic or Hebrew, which read right to left, it is the right edge. If your site may be translated, text-align: start is a safer default than left.
What text-align does not do
It aligns the content inside a block. It does not move the block itself.
index.html
HTML
<style>
.box { width: 160px; background: #d0e8f2; padding: 6px; text-align: center; }
</style>
<div class="box">The text is centered, the box is not.</div>To center the box, use margin: 0 auto (see CSS Margin). It also centers inline things inside it, like links and images, since those behave like text. More on that in CSS Display.
lightbulb
Long paragraphs read best left aligned
Centered text is fine for a line or two. Centering a long paragraph makes each line start in a different place, which is tiring to read.