text-align

text-align aligns inline content inside a block container’s line boxes. It does not move the block’s own box or replace Flexbox/Grid alignment.

Center text inside a full-width box

The blue block stays in its normal position and width. Its text and inline button are centered within it.

<div class="box">
  <p>Centered inline content</p>
  <button type="button" onclick="this.textContent='Activated'">Activate</button>
</div>

.box {
  text-align: center;
  padding: 1rem;
  background: #eff6ff;
}
button {
  min-height: 44px;
  padding: 0.5rem;
}

Keep a short heading centered and prose at the start

The narrower block is centered by its auto margins. The heading is centered with text-align, while the paragraph follows its writing direction’s start edge.

<section class="note">
  <h2>Practice with examples</h2>
  <p>
    Read the code, change one value, and compare the result before adding more
    rules.
  </p>
</section>

.note {
  max-width: 24rem;
  margin-inline: auto;
  padding: 1rem;
  background: #eff6ff;
}
h2 {
  text-align: center;
}
p {
  text-align: start;
  line-height: 1.6;
}

Values and inheritance

Text-align is inherited. Its initial behavior aligns to the inline start, with historical browser descriptions expressed as left for LTR and right for RTL. Start and end follow direction; left and right are physical choices, not obsolete values. Center centers inline content, and justify distributes spacing across eligible lines, normally excluding the last line.

Match-parent resolves logical alignment using the parent’s direction. Newer specification shorthand behavior and additional values have separate compatibility details; the established single-keyword forms are the basis of these examples.

Common mistakes

Text-align:center on a paragraph centers its text, not a fixed-width paragraph box. Use margin for appropriate block centering or justify-content within a layout context.

Long centered or heavily justified paragraphs can be harder to scan. Test actual text and language rather than assuming alignment improves readability. Learn direction, max-width, and text-justify.

Sources and browser support

MDN: text-align describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.