Text alignment in CSS - Browser Rendering Trace

Render Flow - Text alignment

[Parse CSS] -> [Match selector to text element] -> [Apply text-align property] -> [Calculate inline box positions] -> [Repaint text with new alignment]

The browser reads the CSS, finds the text element, applies the text-align property, recalculates how the text lines up inside its container, then redraws the text visually.

Render Steps - 4 Steps

Code Added:<div class="container"> <p>Hello, this is some text.</p> </div>

Before

[container]
|             
| Hello, this is some text.
|             

→

After

[container]
| Hello, this is some text.
|             

Adding the container div with a paragraph inside creates a block box with left-aligned text by default.

🔧 Browser Action:Creates DOM nodes and applies default styles (text-align: left).

Code Sample

A box with a border containing a paragraph of text that is centered horizontally inside the box.

CSS

<div class="container">
  <p>Hello, this is some text.</p>
</div>

CSS

.container {
  width: 20rem;
  border: 0.1rem solid black;
  text-align: center;
}

Render Quiz - 3 Questions

After applying step 4, how is the text positioned inside the container?

A The text is aligned to the right edge of the container.

B The text is aligned to the left edge of the container.

C The text is centered horizontally inside the container.

D The text is stretched to fill the container width.

Common Confusions - 3 Topics

Why doesn't text-align center work on my div?

Text-align only affects inline content inside a block container. If your div has no inline text or only block children, you won't see the effect.

💡 Text-align centers inline text inside the container, not block-level child elements.

Why is my text still left aligned after setting text-align center?

If you apply text-align to a parent container, but the text is inside a child element with its own text-align, the child's setting overrides the parent.

💡 Child elements' text-align overrides parent container's text-align.

Why doesn't text-align affect vertical alignment?

Text-align only controls horizontal alignment of inline content. Vertical alignment requires different CSS properties like line-height or flexbox alignment.

💡 Use text-align for horizontal alignment only.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
text-align	left	Horizontal	Aligns text to the left edge	Default for most text
text-align	center	Horizontal	Centers text horizontally	Center headings or buttons
text-align	right	Horizontal	Aligns text to the right edge	Align numbers or dates
text-align	justify	Horizontal	Stretches lines to fill container width	Newspaper columns, paragraphs

Concept Snapshot

text-align controls horizontal alignment of inline text inside a block container. Default is left alignment. Common values: left, center, right, justify. Does not affect vertical alignment or block elements. Useful for headings, paragraphs, and inline content alignment.