CSS Tutorial

CSS Vertical Align

The CSS vertical-align property is used to align inline-level elements vertically within a line box. It is commonly used for aligning text or inline elements like images and form elements. This property can be applied to inline, inline-block, or table-cell elements.

Key Points on CSS Vertical Align:

The vertical-align property works for inline, inline-block, and table-cell elements.
The property can align elements relative to their parent or other elements within a line box.
Common values for vertical-align include baseline, top, middle, bottom, and sub.
For block-level elements, vertical-align is not effective unless they are set to display as inline or inline-block.
In some cases, line-height and vertical-align work together to achieve proper vertical alignment.
The vertical-align property is commonly used with text-align for better control over element positioning.

Syntax for CSS Vertical Align:

Syntax Example

/* Vertical Align Syntax */
            vertical-align: value;
        
            /* Example */
            vertical-align: middle;

Examples of CSS Vertical Align:

The following examples demonstrate how to use the vertical-align property in different scenarios:

Code Example: Aligning Text


            span {
            vertical-align: middle;
                 }

Output

This text is vertically aligned in the middle.

Code Example: Aligning Inline Images


            img {
            vertical-align: middle;
                }

Output

This image is vertically aligned with the text.

Code Example: Aligning Inline-block Elements


            div {
            display: inline-block;
            vertical-align: top;
            height: 50px;
            width: 50px;
            background-color: lightblue;
                 }

Output

Common Values for Vertical Align:

baseline: Aligns the element with the baseline of its parent.
top: Aligns the top of the element with the top of the tallest element on the line.
middle: Aligns the middle of the element with the middle of the line-height of the parent element.
bottom: Aligns the bottom of the element with the bottom of the line-height of the parent element.
sub: Aligns the element as a subscript.
super: Aligns the element as a superscript.

When using vertical-align with inline elements, make sure the parent element has enough space to accommodate the alignment. For block-level elements, consider using display: inline-block or table-cell to apply vertical alignment.