CSS vertical-align Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS vertical-align property controls how elements set next to each other on a line are lined up. It is most commonly used to align inline elements, such as images and text, but can also be used to align table cells. The default value for vertical-align is 'baseline', which means that the element's baseline will be aligned with the baselines of the other elements on the line. The baseline of an element is the invisible line on which the bottom of most letters and other characters sit.

Initial value: baseline
Applies to: Inline level and table cells
Inherited: No
Computed value: For percentage and length values, the absolute length, otherwise the keyword as specified
Animatable: No
JavaScript syntax: object.style.verticalAlign

Interactive Demo

Vertical Align Demo:

Syntax

vertical-align: auto | use-script | baseline | sub | super | top | text-top | central | middle | bottom | text-bottom | <percentage> | <length>

Values

<percentage>Raise (positive value) or lower (negative value) the box by this distance (a percentage of the computed 'line-height' of the element). The value '0%' means the same as 'baseline'.
<length>Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.
baselineAligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea> is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.
bottomAlign the bottom of the element and its descendants with the bottom of the entire line.
middleAlign the middle baseline of the inline element with the middle baseline of the parent.
subAligns the baseline of the element with the subscript-baseline of its parent.
superAligns the baseline of the element with the superscript-baseline of its parent.
text-bottomAligns the bottom of the element with the bottom of the parent element's font.
text-topAligns the top of the element with the top of the parent element's font.
topAlign the top of the element and its descendants with the top of the entire line.
inherit

Example

HTML

<p>Baseline <img src = "images/2.png" alt = "" ></p> 

<p>Text-Top <img src = "images/2.png" alt = "" class="top"></p> 

<p>Middle <img src = "images/2.png" alt = "" class ="middle"></p>

CSS

div {
   width: 30%; 
}
img {
   width: 75px; 
   height: 75px;
}
p {
   background-color: orange; 
}
.top {
   vertical-align: text-top;
}
.middle {
   vertical-align: middle;
}

Result

Editor