The vertical-align property in CSS is used to specify the vertical alignment of the table-box or inline element.
Syntax:
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom |text-bottom|initial|inherit;
Note:
- This property is mostly used to align images to it’s corresponding text.
- This property can also be used to align the cells inside tables.
- The vertical-align property cannot be used for the alignment of block level elements like p, ol, ul, h1, div etc.
Property Values:
- baseline: It aligns the element baseline corresponding to the baseline of the parent. This might vary according to the browser. It is the default value.
- sub: It aligns the element baseline corresponding to the subscript-baseline of its parent.
- super: It aligns the element baseline corresponding to the superscript-baseline of its parent.
- text-top: It aligns the element top corresponding to the top of the parent’s font.
- text-bottom: Align the element’s bottom corresponding to the bottom of the parent’s font.
- middle: Aligns the element’s middle corresponding to the middle of the parent.
- top: Aligns the element’s top corresponding to the top of the tallest element on it’s line.
- bottom: Aligns the element’s bottom corresponding to the top of the shortest element on it’s line.
- length: Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
- percentage: Aligns the element’s baseline corresponding to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property.
- initial: Initializes the value to the default value.
- inherit: Inherits the value from the parent element.
Example: This example explains all the values of vertical-align property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS vertical-align Property
</title>
<style>
.img1 {
vertical-align: baseline;
}
.img2 {
vertical-align: sub;
}
.img3 {
vertical-align: super;
}
.img4 {
vertical-align: text-top;
}
.img5 {
vertical-align: text-bottom;
}
.img6 {
vertical-align: middle;
}
.img7 {
vertical-align: top;
}
.img8 {
vertical-align: bottom;
}
.img9 {
vertical-align: 25px;
}
img.img10 {
vertical-align: 100%;
}
.img11 {
vertical-align: baseline;
}
.img12 {
vertical-align: inherit;
}
</style>
</head>
<body>
<h2>vertical-align: baseline</h2>
<p>
<img class = "img1" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: sub</h2>
<p>
<img class = "img2" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: super</h2>
<p>
<img class = "img3" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: text-top</h2>
<p>
<img class = "img4" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: text-bottom</h2>
<p>
<img class = "img5" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: middle</h2>
<p>
<img class = "img6" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: top</h2>
<p>
<img class = "img7" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: bottom</h2>
<p>
<img class = "img8" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: length</h2>
<p>
<img class = "img9" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: percentage</h2>
<p>
<img class = "img10" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: initial</h2>
<p>
<img class = "img11" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: inherit</h2>
<p>
<img class = "img12" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p>
</body>
</html>
Output:
Supported Browsers: The browser supported by vertical-align property are listed below:
- Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Internet Explorer 4
- Safari 1.0
- Opera 4.0
My Personal Notes
arrow_drop_up
