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
Align the text of a paragraph with CSS
To align and control the positioning of text within a paragraph, CSS provides several properties including text-align for horizontal alignment and text-indent for first-line indentation.
Text Alignment Properties
The main CSS properties for text alignment are:
-
text-align- Controls horizontal alignment (left, right, center, justify) -
text-indent- Indents the first line of a paragraph
Using text-align Property
<!DOCTYPE html>
<html>
<head>
<style>
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
</style>
</head>
<body>
<p class="left">This paragraph is left-aligned.</p>
<p class="center">This paragraph is center-aligned.</p>
<p class="right">This paragraph is right-aligned.</p>
<p class="justify">This paragraph is justified. The text will be stretched to fill the entire line width, creating even margins on both sides.</p>
</body>
</html>
Using text-indent Property
The text-indent property indents the first line of a paragraph. Values can be specified in pixels, cm, em, or percentages.
<!DOCTYPE html>
<html>
<head>
<style>
.indent-cm { text-indent: 2cm; }
.indent-px { text-indent: 50px; }
.indent-percent { text-indent: 10%; }
</style>
</head>
<body>
<p class="indent-cm">
This text will have first line indented by 2cm and this line will remain at
its actual position. This is done by CSS text-indent property.
</p>
<p class="indent-px">
This paragraph has a 50-pixel indentation on the first line only.
</p>
<p class="indent-percent">
This paragraph uses percentage-based indentation (10% of container width).
</p>
</body>
</html>
Combining Text Alignment Properties
<!DOCTYPE html>
<html>
<head>
<style>
.styled-paragraph {
text-align: justify;
text-indent: 3em;
line-height: 1.6;
margin: 20px 0;
}
</style>
</head>
<body>
<p class="styled-paragraph">
This paragraph combines both text-align and text-indent properties.
The first line is indented by 3em, and the entire paragraph is justified
to create clean, even margins on both sides. This creates a professional
appearance commonly used in formal documents.
</p>
</body>
</html>
Common Text Indent Values
| Unit | Example | Description |
|---|---|---|
| Pixels (px) | text-indent: 30px; |
Fixed pixel value |
| Centimeters (cm) | text-indent: 1.5cm; |
Physical measurement |
| Em units (em) | text-indent: 2em; |
Relative to font size |
| Percentage (%) | text-indent: 15%; |
Relative to container width |
Conclusion
Use text-align to control horizontal text alignment and text-indent to indent the first line of paragraphs. These properties can be combined to create professional text layouts for web documents.
Updated on: 2026-03-15T23:18:59+05:30
539 Views
Advertisements