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
How to set text alignment in HTML?
To align text in HTML, use the style attribute to define the CSS text-align property. Just keep in mind, that the usage of style attribute overrides any style set globally. It will override any style set in the HTML <style> tag or external style sheet.
HTML style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS text-align property for the center, left, and right alignment. HTML5 does not support the align attribute of the <p> tag, so the CSS style is used to set text alignment.
Syntax
selector {
text-align: value;
}
Possible Values
| Value | Description |
|---|---|
left |
Aligns text to the left (default) |
center |
Centers the text |
right |
Aligns text to the right |
justify |
Stretches text to fill the entire line width |
Example 1: Center Alignment
In this example, we will create two paragraph elements and align the second paragraph element to the center of the screen −
<!DOCTYPE html>
<html>
<head>
<style>
.center-text {
text-align: center;
background-color: #f0f0f0;
padding: 10px;
margin: 10px 0;
}
.default-text {
background-color: #e0e0e0;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<h3>Default Aligned Text</h3>
<p class="default-text">This text uses the default left alignment.</p>
<h3>Center Aligned Text</h3>
<p class="center-text">This text is aligned to the center of the container.</p>
</body>
</html>
Two paragraphs appear with gray backgrounds. The first paragraph shows left-aligned text, while the second paragraph displays text centered within its container.
Example 2: Right Alignment
In this example, we will align text to the right side of the screen −
<!DOCTYPE html>
<html>
<head>
<style>
.right-text {
text-align: right;
background-color: #f0f0f0;
padding: 10px;
margin: 10px 0;
}
.default-text {
background-color: #e0e0e0;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<h3>Default Aligned Text</h3>
<p class="default-text">This text uses the default left alignment.</p>
<h3>Right Aligned Text</h3>
<p class="right-text">This text is aligned to the right side of the container.</p>
</body>
</html>
Two paragraphs appear with gray backgrounds. The first paragraph shows left-aligned text, while the second paragraph displays text aligned to the right side of its container.
Example 3: Justify Alignment
In this example, we will demonstrate text justification, which stretches text to fill the entire line width −
<!DOCTYPE html>
<html>
<head>
<style>
.justify-text {
text-align: justify;
background-color: #f0f0f0;
padding: 15px;
width: 300px;
margin: 10px 0;
}
</style>
</head>
<body>
<h3>Justified Text</h3>
<p class="justify-text">
This is a longer paragraph of text that demonstrates how justified alignment works.
The text will be stretched to fill the entire width of the container by adjusting
the spacing between words.
</p>
</body>
</html>
A paragraph with gray background appears where the text is stretched to fill the entire width of the container, with adjusted spacing between words to achieve even left and right margins.
Note: You can use HTML dir attribute to set the text direction as well, but it will not work if there are special characters at the beginning or end. This attribute is used to set the reading direction of text content.
Conclusion
The CSS text-align property provides flexible text alignment options including left, center, right, and justify. Use it with the HTML style attribute or in CSS stylesheets to control how text appears within its container.
238K+ Views
