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.
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:
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>
4.5 (2,570 ratings)
View Course
Output:
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:
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:
Explanation:
As you can see in the paragraph code, vertical-align property 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.
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 –
