 |
VOOZH | about |
|
VOOZH | about |
The CSS vertical-align property is used to control the vertical positioning of inline elements or table cells. It helps in aligning images or text within the same line and is commonly used to adjust content in table cells.
This property is perfect for aligning elements relative to each other without affecting the entire layout.
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;Note:
- The vertical-align property is primarily used to align inline elements (like images) with text.
- It can also be used for aligning content within table cells.
- Block-level elements (e.g., div, p, h1, ul, ol) cannot be aligned using vertical-align.
| Value | Description |
|---|---|
| baseline | Aligns the elementās baseline with the baseline of its parent. This is the default value and may vary by browser. |
| sub | Positions the elementās baseline as a subscript relative to its parentās baseline. |
| super | Positions the elementās baseline as a superscript relative to its parentās baseline. |
| text-top | Aligns the top of the element with the top of the parent's font. |
| text-bottom | Aligns the bottom of the element with the bottom of the parent's font. |
| middle | Centers the element's vertical midpoint with the parent's vertical midpoint. |
| top | Aligns the elementās top with the top of the tallest element in the same line. |
| bottom | Aligns the elementās bottom with the bottom of the shortest element in the same line. |
| length | Moves the elementās baseline by a specified length above (or below for negative values) the parentās baseline. |
| percentage | Shifts the elementās baseline by a percentage relative to the parentās baseline, based on the line-height property. |
| initial | Resets the alignment to the default value (baseline). |
| inherit | Adopts the vertical alignment value from the parent element. |
Let's understand this property through this example
Example: This example explains all the values of vertical-align property.
Output:š Image
The browser supported by vertical-align property are listed below:
