CSS Text & Fonts
CSS Text Alignment
The CSS Text Alignment property is used to control the horizontal alignment of text inside an element.
By default, most text is aligned to the left. Using the text-align property, you can align text to the: The supporting concepts are explained in Logical Properties and CSS Text Decoration.
- Left
- Center
- Right
- Justify
Text alignment is commonly used in headings, paragraphs, navigation menus, and page layouts to improve readability and presentation.
Syntax
CSS Text Alignment Syntax
css
selector {
text-align: value;
}CSS Text Alignment Example
css
h1 {
text-align: center;
}This centers the text inside all <h1> elements.
Attributes
| Value | Description | Example |
|---|---|---|
| left | Aligns text to the left | text-align: left; |
| center | Centers the text | text-align: center; |
| right | Aligns text to the right | text-align: right; |
| justify | Stretches text to align both left and right edges | text-align: justify; |
| inherit | Inherits alignment from parent element | text-align: inherit; |
Example
CSS Text Alignment Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Alignment Example</title>
<style>
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}
</style>
</head>
<body>
<h1 class="center">Centered Heading</h1>
<p class="left">This paragraph is aligned to the left.</p>
<p class="right">This paragraph is aligned to the right.</p>
<p class="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This text is justified so that both the left and right edges appear aligned.</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| text-align | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
leftis the default alignment for most languages written left-to-right.centeris commonly used for headings and banners.rightis useful for specific design layouts and right-to-left languages.justifycreates clean paragraph edges similar to newspapers and magazines.- Text alignment affects inline content within an element.
Conclusion
The CSS Text Alignment property helps control how text is positioned within an element. Whether you need left-aligned paragraphs, centered headings, right-aligned content, or justified text, text-align provides a simple and effective solution for improving page layout and readability.