How to Align Text in HTML
What you’ll build or solve
You’ll align text left, right, center, or justify using CSS.
When this approach works best
Text alignment works best when you:
Learn HTML on Mimo
- Center hero headings or short callouts.
- Right-align prices, totals, or metadata.
- Justify long-form content for a magazine-style layout.
- Apply different alignment rules to different sections.
This approach is a bad idea if you rely on old HTML attributes like align="right" or the <center> tag.
Prerequisites
- A code editor
- A browser
- Basic understanding of HTML and CSS
No additional setup is required.
Step-by-step instructions
Step 1: Use text-align to control alignment
The text-align property controls how inline content aligns inside a block-level container.
Available values:
left(default in left-to-right languages)rightcenterjustify
Apply it to the parent container. The alignment affects the text inside that container.
Example: Align the whole page
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Text alignment</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Centered heading</h1>
<p>This paragraph is centered.</p>
</body>
</html>
Example: Align a specific section
HTML
<section class="pricing">
<h2>Pricing</h2>
<p class="amount">$49</p>
</section>
<style>
.pricing {
text-align: right;
}
</style>
You can use different values in different sections:
CSS
.hero {
text-align: center;
}
.footer {
text-align: right;
}
What to look for:
- Apply
text-alignto block-level containers likediv,section,article, orbody. - The alignment affects inline content inside the container.
- If text does not move, confirm you are not applying it to an inline element like
span.
Step 2: Use inline styles for quick changes
Inline styles work for quick tests or one-time adjustments.
HTML
<p style="text-align: justify;">
This paragraph is justified.
</p>
If you reuse the same alignment multiple times, move it into a class:
HTML
<p class="right">Subtotal</p>
<p class="right">$120</p>
<style>
.right {
text-align: right;
}
</style>
Examples you can copy
Example 1: Centered hero section
HTML
<header class="hero">
<h1>Product Launch</h1>
<p>Coming soon</p>
</header>
<style>
.hero {
text-align: center;
padding: 3rem;
}
</style>
Example 2: Right-aligned invoice totals
HTML
<div class="invoice">
<p>Subtotal</p>
<p class="amount">$120</p>
</div>
<style>
.amount {
text-align: right;
font-weight: bold;
}
</style>
Example 3: Justified article layout
HTML
<article class="post">
<h1>Article Title</h1>
<p>
This paragraph stretches evenly across the container width.
</p>
</article>
<style>
.post p {
text-align: justify;
}
</style>
Common mistakes and how to fix them
Mistake 1: Using the <center> tag
What you might do
HTML
<center>Text</center>
Why it breaks
The <center> tag is deprecated and not part of modern HTML standards.
Fix
HTML
<p class="centered">Text</p>
<style>
.centered {
text-align: center;
}
</style>
Mistake 2: Using the align attribute
What you might do
HTML
<p align="right">Text</p>
Why it breaks
The align attribute is outdated and not recommended in modern HTML.
Fix
HTML
<p class="right">Text</p>
<style>
.right {
text-align: right;
}
</style>
Mistake 3: Applying alignment to an inline element
What you might do
CSS
span {
text-align: center;
}
Why it breaks
Inline elements do not control the layout of surrounding content.
Fix
Apply alignment to a block-level parent:
CSS
div {
text-align: center;
}
Troubleshooting
If the text does not align, confirm you are targeting the correct parent container.
If alignment appears ignored, inspect for more specific CSS rules overriding yours.
If only part of the content aligns, check nested containers.
If layout shifts unexpectedly, verify you are not mixing text alignment with element positioning.
If changes do not apply, confirm your CSS file is linked correctly.
Quick recap
- Use
text-alignto align text. - Available values:
left,right,center,justify. - Apply it to the parent container.
- Avoid deprecated HTML tags and attributes.
- Use inline styles only for quick tests.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot