Introduction to text-align in CSS
Text-align means aligning or place the content of any block of HTML element. Text content can keep left, right, center in the vertical and horizontal direction. Text-alignment captures attention about what exactly the content is all about. The text-align in CSS property aligns only the inline content, not one block item itself.
Example: If text started from the left indicates starting of passing or something, text started at middle indicates heading or new passage, text started at right indicates something like address or details.
Working Principle of text-align in CSS
Text-align property place the content either left, right, center or justify a position in horizontal or vertical by using a CSS property text-align.
The text-align property further have 4 values i.e.
- Left
- Right
- Center
- Justify
1. Horizontal text-align
Below discussed all the types are under horizontal text alignment. Based on these values text-align property works. We can learn it by example with sample code. Now let’s get started
a. text-align:left
It places the block of content to the left position by setting the value to the left.
Syntax:
div{
text-align:left;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="TextAlignLeft.css">
<title>Text-Align-Left</title>
</head>
<body>
<p>I am Naathi Paramesh working as a content writer to EDUCBA. I am
also teaching Core Java,Advanced Java,Spring, Hibernate, CSS, HTML,
DOcumentum, D2, Eclipse IDE, Netbeans, Tomacat classes in Satya
Technologies at Ameerpet, Hyderabad. I have completed my graduation
from Rajiv Gandhi University of Technologies at Basar, also called as
IIIT Basar</p>
</body>
</html>
4.5 (3,023 ratings)
View Course
CSS Code:
p{
color:green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
text-align: left;
}
Output:
b. text-align:right
It places the block of content (every line) to the right position by setting the value to the right.
Syntax:
div{
text-align:right;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="TextAlignRight.css">
<title>Text-Align-Right</title>
</head>
<body>
<p>I am Naathi Paramesh working as a content writer to EDUCBA. I am
also teaching Core Java,Advanced Java,Spring, Hibernate, CSS, HTML,
DOcumentum, D2, Eclipse IDE, Netbeans, Tomacat classes in Satya
Technologies at Ameerpet, Hyderabad. I have completed my graduation
from Rajiv Gandhi University of Technologies at Basar, also called as
IIIT Basar</p>
</body>
</html>
CSS Code:
p{
color:green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
text-align: right;
}
Output:
c. text-align:center
It places the block of content (every line) to the center position by setting the value to the center.
Syntax:
div{
text-align:center;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="TextAlignCenter.css">
<title>Text-Align-Center</title>
</head>
<body>
<p>I am Naathi Paramesh working as a content writer to EDUCBA. I am
also teaching Core Java,Advanced Java,Spring, Hibernate, CSS, HTML,
DOcumentum, D2, Eclipse IDE, Netbeans, Tomacat classes in Satya
Technologies at Ameerpet, Hyderabad. I have completed my graduation
from Rajiv Gandhi University of Technologies at Basar, also called as
IIIT Basar</p>
</body>
</html>
CSS Code:
p{
color:green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
text-align: center;
}
Output:
d. text-align:justify
It can make each line to line gap and word to word gap with equal width by setting the value to justify.
Syntax:
div{
text-align:justify;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="TextAlignJustify.css">
<title>Text-Align-Justify</title>
</head>
<body>
<p>I am Naathi Paramesh working as a content writer to EDUCBA. I am
also teaching Core Java,Advanced Java,Spring, Hibernate, CSS, HTML,
DOcumentum, D2, Eclipse IDE, Netbeans, Tomacat classes in Satya
Technologies at Ameerpet, Hyderabad. I have completed my graduation
from Rajiv Gandhi University of Technologies at Basar, also called as
IIIT Basar</p>
</body>
</html>
CSS Code:
p{
color:green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
text-align: justify;
}
Output:
Up to here clear but we may have doubt if we arise a situation where we must set the last line of a paragraph to left, right, center and justify. Well, we have a solution to this requirement by using the text-align-last property.
2. text-align-last
The text-align-last property also has 4 values,
- Left
- Right
- Center
- Justify
a. Text-align-last:left
It places the last line of a paragraph to the left position by setting the value to left.
Syntax:
div{
text-align-last:left;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Text Align Last left</title>
<link rel="stylesheet" href="TextAlignLastLeft.css">
</head>
<body>
<p>I am Naathi Paramesh working as a content writer to EDUCBA. I am
also teaching Core Java,Advanced Java,Spring, Hibernate, CSS, HTML,
DOcumentum, D2, Eclipse IDE, Netbeans, Tomacat classes in Satya
Technologies at Ameerpet, Hyderabad. I have completed my graduation
from Rajiv Gandhi University of Technologies at Basar, also called as
IIIT Basar</p>
</body>
</html>
CSS Code:
p {
color: green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
text-align-last: left;
}
Output:
b. Text-align-last:right
It places the last line of a paragraph to the right position by setting the value to the right.
Syntax:
div{
text-align-last:right;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Text Align Last Right</title>
<link rel="stylesheet" href="TextAlignLastRight.css">
</head>
<body>
<p>I am Naathi Paramesh working as a content writer to EDUCBA. I am
also teaching Core Java,Advanced Java,Spring, Hibernate, CSS, HTML,
DOcumentum, D2, Eclipse IDE, Netbeans, Tomacat classes in Satya
Technologies at Ameerpet, Hyderabad. I have completed my graduation
from Rajiv Gandhi University of Technologies at Basar, also called as
IIIT Basar</p>
</body>
</html>
CSS Code:
p {
color: green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
text-align-last: right;
}
Output:
c. Text-align-last:center
It places the last line of a paragraph to the center position by setting the value to the center.
Syntax:
div{
text-align-last:center;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Text Align Last Center</title>
<link rel="stylesheet" href="TextAlignLastCenter.css">
</head>
<body>
<p>I am Naathi Paramesh working as a content writer to EDUCBA. I am
also teaching Core Java,Advanced Java,Spring, Hibernate, CSS, HTML,
DOcumentum, D2, Eclipse IDE, Netbeans, Tomacat classes in Satya
Technologies at Ameerpet, Hyderabad. I have completed my graduation
from Rajiv Gandhi University of Technologies at Basar, also called as
IIIT Basar</p>
</body>
</html>
CSS Code:
p {
color: green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
text-align-last: center;
}
Output:
d. Text-align-last:justify
It can make the last line paragraph, line gap and word to word gap with equal width by setting the value to justify.
Syntax:
div{
text-align-last:justify;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Text Align Last Justify</title>
<link rel="stylesheet" href="TextAlignLastJustify.css">
</head>
<body>
<p>I am Naathi Paramesh working as a content writer to EDUCBA. I am
also teaching Core Java,Advanced Java,Spring, Hibernate, CSS, HTML,
DOcumentum, D2, Eclipse IDE, Netbeans, Tomacat classes in Satya
Technologies at Ameerpet, Hyderabad. I have completed my graduation
from Rajiv Gandhi University of Technologies at Basar, also called as
IIIT Basar</p>
</body>
</html>
CSS Code:
p {
color: green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
text-align-last: justify;
}
Output:
3. Vertical Text-align
Below discussed all the types are under vertical text alignment. Whenever we want to align a text in vertical direction then we have a vertical-align property to achieve this requirement fulfillment.
Vertical-align have again 3 values to deal with i.e.
- Top or super
- Sub or bottom
- Middle
a. vertical-align:top
It can make the word move upwards vertically and the rest of the words are in the same line.
Syntax:
div{
vertical-align:top;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="VerticalAlignTop.css">
<title>Vertical Align Top</title>
</head>
<body>
<p>I am Naathi Paramesh working as a <span class="vertical1">content</span> writer to EDUCBA. I am
also teaching Core Java,Advanced Java,Spring, Hibernate,<span class="vertical1"> css</span>, HTML,
DOcumentum, D2, Eclipse IDE, Netbeans, Tomacat classes in <span class="vertical1">satya</span>
technologies at Ameerpet, Hyderabad. I have completed my graduation
<span class="vertical1">from</span> Rajiv Gandhi University of Technologies at Basar, also called as
IIIT Basar</p>
</body>
</html>
In the above code <span> tag has taken for apply styles for a single word, here for apply vertical-align as a top.
CSS Code:
p {
color: green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
font-size: 30px;
}
.vertical1{
font-size: 18px;
color:blue;
vertical-align: top;
}
Output:
In the above output, all blue highlighted content moves vertically upwards as per our requirement.
b. vertical-align:bottom
It can make the word move downwards vertically and the rest of the words are in the same line.
Syntax:
div{
vertical-align:bottom;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="VerticalAlignBottom.css">
<title>Vertical Align Bottom</title>
</head>
<body>
<p>I am Naathi Paramesh working as a <span class="vertical1">content</span> writer to EDUCBA. I am
also teaching Core Java,Advanced Java,Spring, Hibernate,<span class="vertical1"> css</span>, HTML,
DOcumentum, D2, Eclipse IDE, Netbeans, Tomacat classes in <span class="vertical1">satya</span>
technologies at Ameerpet, Hyderabad. I have completed my graduation
<span class="vertical1">from</span> Rajiv Gandhi University of Technologies at Basar, also called as
IIIT Basar</p>
</body>
</html>
CSS Code:
p {
color: green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
font-size: 30px;
}
.vertical1{
font-size: 18px;
color:blue;
vertical-align: bottom;
}
Output:
In the above output, all blue highlighted content moves vertically downwards as per our requirement.
c. vertical-align:middle
It can make the word move middle vertically( it still at the same position as original) and the rest of the words are in the same line.
Syntax:
div{
vertical-align:middle;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="VerticalAlignMiddle.css">
<title>Vertical Align Middle</title>
</head>
<body>
<p>
I am Naathi Paramesh working as a <span class="vertical1">content</span>
writer to EDUCBA. I am also teaching Core Java,Advanced Java,Spring,
Hibernate,<span class="vertical1"> css</span>, HTML, DOcumentum, D2,
Eclipse IDE, Netbeans, Tomacat classes in <span class="vertical1">satya</span>
technologies at Ameerpet, Hyderabad. I have completed my graduation <span
class="vertical1">from</span> Rajiv Gandhi University of Technologies
at Basar, also called as IIIT Basar
</p>
</body>
</html>
CSS Code:
p {
color: green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
font-size: 30px;
}
.vertical1{
font-size: 18px;
color:blue;
vertical-align: middle;
}
Output:
In the above output, all blue highlighted content moves vertical middle as per our requirement.
Conclusion
We can align text in the left, right, center horizontally and align text in the top, bottom, middle vertically by using text-align and vertical-align respectively.
Recommended Articles
This is a guide to text-align in CSS. Here we discuss the introduction and working principle of text-align in CSS along with the examples and code implementation. You may also look at the following articles to learn more-
