CSS

CSS

🎯 CSS vertical-align Property (Vertical Alignment in CSS)

The vertical-align property defines how an inline element aligns vertically relative to surrounding text or elements.

It is commonly used with images, inline elements, table cells, superscripts, and subscripts.

πŸ’‘ Common Usage Areas

  • Images inside text
  • Inline elements (span, img, button)
  • Table cells
  • Superscripts and subscripts

🧩 Simple Definition

vertical-align = controls vertical alignment of inline elements.

πŸ’‘ Why Is It Useful?

By default, inline elements align according to the text baseline.

Sometimes this creates awkward positioning, especially for:

  • Images next to text
  • Icons inside buttons
  • Mathematical formulas
  • Table content alignment

The vertical-align property helps fix these alignment problems.

🧠 Basic Syntax

CSS

vertical-align: value;

🧩 Example 1 β€” Vertically Center an Image

HTML

<p>
    Text with an image:
    <img
        src="image.png"
        style="vertical-align: middle;"
        alt="example"
    >
    aligned like this.
</p>

🧠 Explanation

CSS

vertical-align: middle;

πŸ‘‰ The image becomes vertically centered relative to the surrounding text.

This creates a cleaner inline appearance.

🧩 Example 2 β€” Align to the Top

HTML

<p>
    Text with an image:
    <img
        src="image.png"
        style="vertical-align: middle;"
        alt="example"
    >
    aligned like this.
</p>

🧠 Explanation

CSS

vertical-align: top;

πŸ‘‰ The image aligns with the top of the text line.

🧩 Example 3 β€” Subscript and Superscript

HTML

H<sub style="vertical-align: sub;">2</sub>O

x<sup style="vertical-align: super;">2</sup>

🧠 Explanation

sub creates a subscript effect.

Example: Hβ‚‚O

super creates a superscript effect.

Example: xΒ²

These are commonly used in mathematics, chemistry, and scientific notation.

βš™οΈ Supported Values

Value Description
baseline Aligns to the text baseline (default)
top Aligns to the top
middle Vertically centers the element
bottom Aligns to the bottom
text-top Aligns with top of text
text-bottom Aligns with bottom of text
sub Creates subscript alignment
super Creates superscript alignment
length Moves element using fixed units
% Moves element using percentage
initial Resets to default value
inherit Inherits from parent element

πŸ”Ή Common Values

baseline (Default)

CSS

vertical-align: baseline;

πŸ‘‰ Aligns the element with the normal text baseline.

middle

CSS

vertical-align: middle;

πŸ‘‰ Centers the element vertically relative to nearby text.

top

CSS

vertical-align: top;

πŸ‘‰ Aligns the element to the top of the line.

bottom

CSS

vertical-align: bottom;

πŸ‘‰ Aligns the element to the bottom of the line.

Using Length Values

CSS

vertical-align: 10px;

πŸ‘‰ Moves the element upward or downward using a fixed amount.

Using Percentage Values

CSS

vertical-align: 20%;

πŸ‘‰ Adjusts vertical positioning using percentage values.

⚠️ Important Note

The vertical-align property mainly works with:

  • inline elements
  • inline-block elements
  • table cells

❌ It does not work properly on normal block elements like:

For block-level vertical alignment, developers usually use:

  • Flexbox
  • CSS Grid
  • Positioning techniques

🎨 Common Use Cases

The vertical-align property is commonly used for:

  • Aligning icons with text
  • Positioning inline images
  • Creating superscripts/subscripts
  • Table-cell alignment
  • Fixing icon/button alignment

🧩 Practical Example

CSS

.icon {

  vertical-align: middle;

}

πŸ‘‰ Commonly used to align icons neatly beside text.

βš–οΈ Difference Between text-top and top

Value Behavior
top Aligns relative to line box
text-top Aligns relative to text top

  • 🧠 In Summary

  • vertical-align controls vertical alignment of inline elements.
  • Most common values:
  • middle β†’ centers vertically
  • top β†’ aligns to top
  • bottom β†’ aligns to bottom
  • sub β†’ creates subscript
  • super β†’ creates superscript
CSS text-align-last
CSS user-select