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
PHP
<!doctype html>
<htmllang="en">
<head>
<metacharset="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
JavaScript
<sectionclass="pricing">
<h2>Pricing</h2>
<pclass="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.
CSS
<pstyle="text-align:justify;">
This paragraph is justified.
</p>
If you reuse the same alignment multiple times, move it into a class:
<pclass="right">Subtotal</p>
<pclass="right">$120</p>
<style>
.right {
text-align:right;
}
</style>
Examples you can copy
Example 1: Centered hero section
JavaScript
<headerclass="hero">
<h1>Product Launch</h1>
<p>Coming soon</p>
</header>
<style>
.hero {
text-align:center;
padding:3rem;
}
</style>
Example 2: Right-aligned invoice totals
JavaScript
<divclass="invoice">
<p>Subtotal</p>
<pclass="amount">$120</p>
</div>
<style>
.amount {
text-align:right;
font-weight:bold;
}
</style>
Example 3: Justified article layout
CSS
<articleclass="post">
<h1>Article Title</h1>
<p>
This paragraph stretches evenly across the container width.
</p>
</article>
<style>
.postp {
text-align:justify;
}
</style>
Common mistakes and how to fix them
Mistake 1: Using the <center> tag
What you might do
PHP
<center>Text</center>
Why it breaks
The <center> tag is deprecated and not part of modern HTML standards.
Fix
JavaScript
<pclass="centered">Text</p>
<style>
.centered {
text-align:center;
}
</style>
Mistake 2: Using the align attribute
What you might do
CSS
<palign="right">Text</p>
Why it breaks
The align attribute is outdated and not recommended in modern HTML.
Fix
JavaScript
<pclass="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