How to Align Text in CSS

What You’ll Build or Solve

You’ll align text horizontally using text-align. By the end, you’ll know how to apply alignment to containers or specific elements and avoid confusing text alignment with layout positioning.

When This Approach Works Best

This approach works best when you:

• Center headings in a hero section
• Right-align prices or numbers
• Justify long article paragraphs
• Align labels inside cards or sections

Avoid layout systems like Flexbox or Grid when you only need to move text inside a block. Use those systems when positioning elements, not aligning text content.

Prerequisites

• A basic HTML file
• A linked CSS file or a <style> block
• Basic knowledge of elements like p, h1, and div

Example structure used in this guide:

<divclass="container">
<h1>Title</h1>
<p>Sample paragraph text.</p>
</div>

Step-by-Step Instructions

Step 1: Align Text Horizontally with text-align

Use text-align on a block-level element.

.container {
  text-align:center;
}

Common Values

text-align:left;
text-align:right;
text-align:center;
text-align:justify;

You can apply alignment to a container or to specific elements:

h1 {
  text-align:center;
}

p {
  text-align:justify;
}

Choose the selector that matches your layout structure. Apply it to the block element that wraps the text.

What to Look For

• Apply text-align to block-level elements like div, section, article, or p
• The property aligns text and inline content inside the block
• In Flexbox or Grid layouts, justify-content moves elements, while text-align aligns the text inside them
• text-align does not vertically center text
• Inline elements like span will not visibly change alignment unless converted to block-level elements

Examples You Can Copy

Example 1: Center a Page Heading

<h1class="page-title">Welcome</h1>

.page-title {
  text-align:center;
}

Example 2: Right-Align Prices in a List

<divclass="product">
<spanclass="name">Laptop</span>
<spanclass="price">$999</span>
</div>

.price {
  display:block;
  text-align:right;
}

Example 3: Justify Article Text

<article>
<p>
    This is a longer paragraph that spans multiple lines to show how justified alignment distributes space evenly between words.
</p>
</article>

articlep {
  text-align:justify;
}

Example 4: Center Text Inside a Card

<divclass="card">
<h2>Join Now</h2>
<p>Sign up to get started.</p>
</div>

.card {
  text-align:center;
}

Common Mistakes and How to Fix Them

Mistake 1: Using justify-content to Align Text

What you might do:

.container {
  display:flex;
  justify-content:center;
}

Why it breaks:

justify-content controls the position of child elements, not the text inside them.

Correct approach:

.container {
  text-align:center;
}

Use Flexbox for layout positioning and text-align for text alignment.

Mistake 2: Applying text-align to Inline Elements

What you might do:

span {
  text-align:center;
}

Why it breaks:

Inline elements do not control layout width, so alignment changes are not visible.

Correct approach:

Apply alignment to the parent:

div {
  text-align:center;
}

Or convert the element:

span {
  display:block;
  text-align:center;
}

Troubleshooting

If the text doesn't move, confirm you applied text-align to a block-level parent.

If right alignment looks unchanged, check that the container has enough width.

If alignment works in one section but not another, inspect inherited styles.

If nothing updates, confirm your CSS file is linked correctly, and selectors match your HTML.

Quick Recap

• Use text-align to control horizontal text alignment
• Apply it to block-level elements
• Do not confuse justify-content with text alignment
• Inline elements may need display: block
• Vertical alignment requires different properties