Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set Text Alignment using CSS
To set text alignment using CSS, use the text-align property. This property controls how text content is aligned within its container element.
Syntax
selector {
text-align: value;
}
Possible Values
| Value | Description |
|---|---|
left |
Aligns text to the left (default for most languages) |
right |
Aligns text to the right |
center |
Centers the text |
justify |
Stretches text to align with both left and right margins |
initial |
Sets to the default value |
inherit |
Inherits from the parent element |
Example 1: Text Justify Alignment
The following example demonstrates text justification with multiple columns −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
columns: 2;
text-align: justify;
padding: 20px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today's Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results.
</div>
</body>
</html>
Text appears in two columns with justified alignment, where each line stretches to fill the full width of each column.
Example 2: Center Text Alignment
This example shows how to center align text within elements −
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linear-gradient(to right, #ffeb3b, #ff9800, #4caf50, #2196f3);
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.demo {
text-align: center;
color: navy;
font-size: 18px;
margin: 20px;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo">Exam begins at 9AM.</p>
</body>
</html>
A colorful gradient background appears with centered heading and examination details. All text is perfectly centered on the page.
Example 3: Different Text Alignments
This example demonstrates all major text alignment values −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 2px solid #333;
margin: 10px;
padding: 15px;
}
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }
</style>
</head>
<body>
<div class="container left">
<strong>Left Aligned:</strong> This text is aligned to the left side of the container.
</div>
<div class="container right">
<strong>Right Aligned:</strong> This text is aligned to the right side.
</div>
<div class="container center">
<strong>Center Aligned:</strong> This text is centered.
</div>
<div class="container justify">
<strong>Justified:</strong> This longer text content is justified, meaning it stretches to fill the entire width of the container from left to right margins.
</div>
</body>
</html>
Four bordered containers appear, each demonstrating different text alignment: left-aligned, right-aligned, center-aligned, and justified text.
Conclusion
The text-align property is essential for controlling text layout. Use left or right for directional alignment, center for centered content, and justify for professional document formatting.
Updated on: 2026-03-15T13:45:55+05:30
2K+ Views
Advertisements