CSS vertical-align Property

Description

The vertical-align property controls the vertical placement of an inline-level box relative to its line box and to adjacent inline boxes, and it also affects the alignment of content inside table cells. In inline formatting contexts this property determines how an element is positioned with respect to the baseline, the cap height, the middle of the line box, or other alignment points defined by fonts and replaced elements. For table cells, its effect is to shift the cell’s contents vertically within the cell’s content area rather than moving the entire cell itself.

Because vertical-align acts on the inline box within the line box, it directly interacts with the spacing and spacing distribution of a line. The computed position of an inline box influences the line box’s ascent and descent, which in turn affects how much vertical space is reserved for the line — this is where the relationship with line-height becomes important. Changing vertical alignment can create visual offsets between adjacent inline elements (for example, aligning an image to the baseline vs. the middle), and those offsets can cause the line to expand or contract depending on the ascenders/descenders of the involved boxes.

In practice, the property’s behavior depends heavily on the element’s display context (inline, inline-block, table-cell, etc.), so it’s important to consider display when predicting results. It also interacts with transforms and other visual effects that alter an element’s rendering; for example, applying a transform does not change the normal flow baseline but can visually move content, which may require rethinking alignment choices. For predictable vertical placement, use vertical-align when working with inline-level and table-cell content, and prefer layout models like flexbox or grid when you need robust, container-level control over vertical alignment.

Definition

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

<div class="container">

  <h2>Inline vertical-align examples</h2>

  <p>Inline blocks aligned against surrounding text:</p>

  <div class="inline-row">

    <span class="icon align-baseline">A</span>

    <span class="label">baseline</span>



    <span class="icon align-top">A</span>

    <span class="label">top</span>



    <span class="icon align-middle">A</span>

    <span class="label">middle</span>



    <span class="icon align-bottom">A</span>

    <span class="label">bottom</span>

  </div>



  <h2>Table-cell vertical-align examples</h2>

  <div class="table">

    <div class="cell top">Top</div>

    <div class="cell middle">Middle</div>

    <div class="cell bottom">Bottom</div>

  </div>

</div>

CSS

.container {
  max-width: 800px;
  margin: 24px auto;
  font-family: Arial, sans-serif;
  color: #222;
}

.inline-row {
  font-size: 18px;
  line-height: 60px; /* taller line-height to make vertical differences obvious */
  border: 1px dashed #e1e1e1;
  padding: 12px;
}

.icon {
  display: inline-block; /* inline-level element so vertical-align applies */
  width: 40px;
  height: 40px;
  background: #2b8c6a;
  color: #fff;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: baseline; /* default for demonstration */
}

.label {
  margin-right: 20px;
  color: #333;
  vertical-align: middle; /* labels sit roughly centered next to icons */
}

/* explicit vertical-align examples */
.align-baseline { vertical-align: baseline; }
.align-top      { vertical-align: top; }
.align-middle   { vertical-align: middle; }
.align-bottom   { vertical-align: bottom; }

/* table-cell example to show vertical-align on table cells */
.table {
  display: table;
  width: 100%;
  border: 1px solid #ddd;
  margin-top: 20px;
}

.cell {
  display: table-cell;
  width: 33.333%;
  height: 120px;
  padding: 8px;
  text-align: center;
  font-weight: 600;
  background: #f9f9f9;
  border-right: 1px solid #eee;
}

.cell.top    { vertical-align: top; }
.cell.middle { vertical-align: middle; }
.cell.bottom { vertical-align: bottom; }

.cell:last-child { border-right: none; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS vertical-align property. Hover over a browser icon to see the version that first introduced support for this CSS property.