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
Usage of text-align property in CSS
The text-align property in CSS controls the horizontal alignment of text content within its container. It accepts several values to position text left, right, center, or justify it across the available width.
Syntax
text-align: left | right | center | justify | start | end;
Property Values
| Value | Description |
|---|---|
left |
Aligns text to the left (default) |
right |
Aligns text to the right |
center |
Centers text horizontally |
justify |
Stretches text to fill the full width |
Example
Here's how to use different text-align values:
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<p style="text-align: right;">
This paragraph is right-aligned within its container.
</p>
</div>
<div class="container">
<p style="text-align: center;">
This paragraph is center-aligned.
</p>
</div>
<div class="container">
<p style="text-align: left;">
This paragraph is left-aligned (default behavior).
</p>
</div>
<div class="container">
<p style="text-align: justify;">
This paragraph uses justify alignment. The text is stretched to fill the entire width of the container, creating even spacing between words.
</p>
</div>
</body>
</html>
Common Use Cases
The text-align property is commonly used for:
- Headings: Center-aligning titles and headers
- Navigation: Aligning menu items
- Content blocks: Justifying paragraph text for formal documents
- Form elements: Right-aligning labels or input fields
Key Points
-
text-alignonly affects inline and inline-block elements - The property is inherited by child elements
-
justifyworks best with longer text blocks -
leftis the default value in left-to-right languages
Conclusion
The text-align property provides essential control over text positioning in web layouts. Use center for headings, justify for formal content, and left/right for specific design requirements.
Updated on: 2026-03-15T23:18:59+05:30
111 Views
Advertisements