CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

CSS Vertical Align

The CSS vertical align property is used to define the vertical alignment of an inline or table-cell box. It is the one of the self-explanatory property of CSS. It is not very easy property for beginners.

What it does

It is applied to inline or inline-block elements.
It affects the alignment of the element, not its content. (except table cells)
When it applied to the table cells, it affect the cell contents, not the cell itself.

CSS Vertical Align Values

value	description
baseline	It aligns the baseline of element with the baseline of parent element. This is a default value.
length	It is used to increase or decrease length of the element by the specified length. negative values are also allowed.
%	It is used to increase or decrease the element in a percent of the "line-height" property. negative values are allowed.
sub	It aligns the element as if it was subscript.
super	It aligns the element as if it was superscript.
top	It aligns the top of the element with the top of the tallest element on the line.
bottom	It aligns the bottom of the element with the lowest element on the line.
text-top	the top of the element is aligned with the top of the parent element's font.
middle	the element is placed in the middle of the parent element.
text-bottom	the bottom of the element is aligned with the bottom of the parent element's font.
initial	It sets this property to Its default value.
inherit	inherits this property from Its parent element.

CSS Vertical Align Example

<!DOCTYPE html>
<html>
<head>
<style>
img.top {
    vertical-align: text-top;
}
img.bottom {
    vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src="good-morning.jpg" alt="Good Morning Friends"/> This is an image with a default alignment.</p> 
<p><img src="good-morning.jpg" class="top" alt="Good Morning Friends"/> This is an image with a text-top alignment.</p> 
<p><img src="good-morning.jpg" class="bottom" alt="Good Morning Friends"/> This is an image with a text-bottom alignment.</p>
</body>
</html>

Test it Now

Output:

Good Morning Friends This is an image with a default alignment.

Good Morning Friends This is an image with a text-top alignment.

Good Morning Friends This is an image with a text-bottom alignment.

Next TopicCSS White Space

← prev next →