EDUCBA

Home Software Development Software Development Tutorials CSS Tutorial text-align in CSS

text-align in CSS

By Priya PedamkarPriya Pedamkar

text-align in CSS

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, centre 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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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>

CSS Code:

p{
color:green;
border: 5px solid orange;
padding: 1px 1px 1px 1px;
text-align: left;
}

Output:

Left

Note: Default alignment of any text starts from left only so we have not found out any difference with text-align: left as we can see in the above images.
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:

right

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:

center

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:

justify

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:

text-align in CSS 1-5

Note: As we know the last line always starts from left so we can not make any difference from the initial image as in the first example text-align:left.
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:

text-align in CSS 1-6

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:

text-align in CSS 1-7

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:

text-align in CSS 1-8

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
Note: All the below examples, I have taken only one word to move up, down and middle for better understanding.
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:

Top or super

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:

Sub or bottom

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:

Middle

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 basic concept 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 –

  1. CSS Selectors
  2. CSS Pagination
  3. CSS Text Underline
  4. CSS Margin Colo
0 Shares
Share
Tweet
Share
quiz