EDUCBA

Home » Software Development » Software Development Tutorials » CSS Tutorial » CSS Vertical Align

CSS Vertical Align

Introduction to CSS Vertical Align

We have predefined property vertical-align to align the text vertically. Vertical-align CSS property can align the elements in the top, bottom, and middle vertical direction.

Real-Time Scenario: For example, if we have a mathematical formula (a+b)^2. 2 must be at the top of (a+b)base. But we can’t directly put these 2 values on the top directly. Put any element in the vertical direction we must use the vertical-align property. So, here we can use the vertical-align property.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Types of vertical-align:

  • Vertical-align: top
  • Vertical-align: super
  • Vertical-align: bottom
  • Vertical-align: sub
  • Vertical-align: middle
  • Vertical-align: baseline

How does Vertical-Align Property Values work in CSS?

  • Vertical-align value top or super keeps the element on top of the base element.
  • Vertical-align value bottom or sub keeps the element on the bottom of the base element.
  • Vertical-align value middle keeps the element in the middle of the base element.
  • Vertical-align value baseline keeps the element in the base of the element (it is the default value of vertical-align).

Syntax 1:

div
{
Vertical-align: top;
}
Note: top value can also use as text-top.

Syntax 2:

div
{
Vertical-align: super;
}

Syntax 3:

div
{
Vertical-align: bottom;
}
Note: bottom value can also use as text-bottom.

Syntax 4:

div
{
Vertical-align: sub;
}

Syntax 5:

div
{
Vertical-align: middle;
}

Syntax 6:

div
{
Vertical-align: baseline;
}
Note: We can also use all these properties with images as well.

Examples of CSS Vertical Align

Below are the examples for CSS vertical-align :

Example #1 – Vertical-align: top or super

Code: 

<!DOCTYPE html>
<html>
<head>
<title>Vertical Align</title>
</head>
<style>
.header
{
text-align: center;
color: brown;
}
p {
color: green;
border: 5px solid orange;
padding: 5px;
font-size: 20px;
text-align: justify;
font-size: 20px;
}
.vertical1
{
font-size: 15px;
color:blue;
vertical-align: top;
}
.vertical2
{
font-size: 15px;
color:purple;
vertical-align: super;
}
</style>
<body>
<h2 class="header">Vertical Align Top</h2>
<p>
Executed and contributed to full-stack web development projects, with
an<span class="vertical1">emphasis</span> on front end features,
browser manipulation, and cross-browser <span class="vertical1">compatibility</span>.
Wrote templates and front-end code for ECM app to meet WebTop
application compatibility.
</p>
<p>
Executed and contributed to full-stack web development projects, with
an<span class="vertical2">emphasis</span> on front end features,
browser manipulation, and cross-browser <span class="vertical2">compatibility</span>.
Wrote templates and front-end code for ECM app to meet WebTop
application compatibility.
</p>
</body>
</html>

Output:

CSS vertical align -example 1

Explanation:

As you can see in the paragraph code, vertical-align property used with the top value and second paragraph vertical-align property used with super value. You can observe blue colored text and purple colored text in both cases, the output will be the same. So, top and super are working similarly.

Example #2 – Vertical-align: bottom or sub

Code:

<!DOCTYPE html>
<html>
<head>
<title>Vertical Align</title>
</head>
<style>
.header
{
text-align: center;
color: brown;
}
p {
color: green;
border: 5px solid orange;
padding: 5px;
font-size: 20px;
text-align: justify;
font-size: 20px;
}
.vertical1
{
font-size: 15px;
color:blue;
vertical-align: bottom;
}
.vertical2
{
font-size: 15px;
color:purple;
vertical-align: sub;
}
</style>
<body>
<h2 class="header">Vertical Align Bottom and Sub</h2>
<p>
Executed and contributed to full-stack web development projects, with
an<span class="vertical1">emphasis</span> on front end features,
browser manipulation, and cross-browser <span class="vertical1">compatibility</span>.
Wrote templates and front-end code for ECM app to meet WebTop
application compatibility.
</p>
<p>
Executed and contributed to full-stack web development projects, with
an<span class="vertical2">emphasis</span> on front end features,
browser manipulation, and cross-browser <span class="vertical2">compatibility</span>.
Wrote templates and front-end code for ECM app to meet WebTop
application compatibility.
</p>
</body>
</html>

Output:

CSS vertical align -example 2

Explanation:

As you can see in the paragraph code, vertical-align property used with bottom value and second paragraph vertical-align property used with sub value. You can observe blue colored text and purple colored text in both cases, the output will be the same. So, the bottom and sub are working similarly.

Example #3 – Vertical-align: middle

Code: 

<!DOCTYPE html>
<html>
<head>
<title>Vertical Align</title>
</head>
<style>
.header
{
text-align: center;
color: brown;
}
p {
color: green;
border: 5px solid orange;
padding: 5px;
font-size: 20px;
text-align: justify;
}
.vertical1
{
font-size: 15px;
color:blue;
vertical-align: middle;
}
</style>
<body>
<h2 class="header">Vertical Align Middle</h2>
<p>
Executed and contributed to full-stack web development projects, with
an<span class="vertical1">emphasis</span> on front end features,
browser manipulation, and cross-browser <span class="vertical1">compatibility</span>.
Wrote templates and front-end code for ECM app to meet WebTop
application compatibility.
</p>
</body>
</html>

Output:

Example 3

Explanation:

As you can see in the paragraph code, vertical-align property used with a middle value. You can observe a blue colored text is positioned in the middle.

Example #4 – Vertical-align: baseline

Code:

<!DOCTYPE html>
<html>
<head>
<title>Vertical Align</title>
</head>
<style>
.header
{
text-align: center;
color: brown;
}
p {
color: green;
border: 5px solid orange;
padding: 5px;
font-size: 20px;
text-align: justify;
}
.vertical1
{
font-size: 15px;
color:blue;
vertical-align: baseline;
}
</style>
<body>
<h2 class="header">Vertical Align Baseline</h2>
<p>
Executed and contributed to full-stack web development projects, with
an<span class="vertical1">emphasis</span> on front end features,
browser manipulation, and cross-browser <span class="vertical1">compatibility</span>.
Wrote templates and front-end code for ECM app to meet WebTop
application compatibility.
</p>
</body>
</html>

Output:

Example 4

Explanation:

As you can see in the paragraph code, the vertical-align property is used with the baseline value. You can observe blue colored text is positioned at the baseline. It is the default value of the vertical-align property.

Conclusion

Vertical align property is used with top or super, bottom or sub, middle and baseline values to position the text in the top, bottom, middle, and baseline respectively.

Bootstrap Training (2 Courses, 6+ Projects)

4.9

jQuery Training (8 Courses, 5 Projects)

4.8

Recommended Articles

This is a guide to CSS Vertical Align. Here we discuss the introduction, examples and how does vertical-align property values work in CSS with syntax. You can also go through our other suggested articles to learn more –

  1. CSS Box Sizing
  2. CSS Layout
  3. CSS Text Formatting
  4. CSS Pagination
0 Shares
Share
Tweet
Share
quiz