CSS: vertical-align property
This CSS tutorial explains how to use the CSS property called vertical-align with syntax and examples.
Description
The CSS vertical-align property defines the vertical alignment of an inline element or table cell element.
Syntax
The syntax for the vertical-align CSS property is:
vertical-align: value;
Parameters or Arguments
- value
The alignment of the text. It can be different values depending on whether the element is an inline element or a table-cell element.
Value for Inline Elements
When value is an inline element, it can be one of the following:
Value Description top Top of the element and its descendants are aligned with the top of the entire line
img { vertical-align: top; }bottom Bottom of the element and its descendants are aligned with the bottom of the entire line
img { vertical-align: bottom; }baseline Baseline of the element is aligned with the baseline of its parent
img { vertical-align: baseline; }sub Baseline of the element is aligned with the subscript-baseline of its parent
img { vertical-align: sub; }super Baseline of the element is aligned with the superscript-baseline of its parent
img { vertical-align: super; }text-top Top of the element is aligned with the top of the parent element's font
img { vertical-align: text-top; }text-bottom Bottom of the element is aligned with the bottom of the parent element's font
img { vertical-align: text-bottom; }middle Middle of the element is aligned with the middle of the lowercase letters in the parent element's font
img { vertical-align: middle; }fixed Baseline of the element is aligned at a given fixed amount above the baseline of its parent
img { vertical-align: 5px; }percentage Baseline of the element is aligned at a given percentage amount above the baseline of its parent (percentage of the line-height property)
img { vertical-align: 10%; }inherit Element will inherit the vertical-align property from its parent element
img { vertical-align: inherit; }Value for Table Cells
When value is a table cell, it can be one of the following:
Value Description top Top padding edge of the cell is aligned with the top of the row
td { vertical-align: top; }middle Center of the padding box of the cell is aligned within the row
td { vertical-align: middle; }bottom Bottom padding edge of the cell is aligned with the bottom of the row
td { vertical-align: top; }inherit Element will inherit the vertical-align property from its parent element
td { vertical-align: inherit; }
Note
- The vertical-align property can be a negative value.
- If the element does not have a baseline, the vertical-align property will use the margin edge instead.
Browser Compatibility
The CSS vertical-align property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the vertical-align property below, exploring examples of how to use this property in CSS.
With Inline Elements
Let's look at a CSS vertical-align example with inline elements.
img { vertical-align: top; }
In this CSS vertical-align example, we have set the vertical-align property to top for the <img> tag.
With Table Cells
Next, let's look at a CSS vertical-align example where we left-align the text.
td { vertical-align: bottom; }
In this CSS vertical-align example, we have set the vertical-align property to bottom for the <td> tag.
Advertisements