Home >>CSS Tutorial >CSS Vertical align

CSS Vertical align

CSS Vertical Align

The CSS vertical align property may be used to define the vertical alignment of an of an inline element relative to its element’s line or to the parent element. You can also use negative values as per your needs.

The alignment of the element is affected by using vertical align not its content (Except table cells).

CSS Vertical align values

These are the following properties affect the positioning relative to the parent element:

value Description
Sub It aligns the element printed below the line as if it was subscripted.
Super It aligns the element printed above the line as if it was superscript.
Baseline This is a default value. It aligns the element with the baseline of parent element.
% It is used to set increment or decrement the element in a percent of the "line-height" property. Negative values are allowed.
text-top using the top property, the element is aligned with the parent element's font.
Middle By using this property the element is placed in the middle of the parent element.
text-bottom using the bottom property, the element is aligned with the bottom of the parent element's font.
Length the negative values are also allowed. It is used for increment or decrement in length of the element by the specified length.
Top It aligns the element (text or image) with the top of the tallest element on the line.
Bottom It aligns the element (text or image) with the bottom of the bottom element on the line.
Initial - The default value is set by using this property.
Inherit From its parent element it inherits this property.

Let's take an example of CSS Vertical align Values:

<!DOCTYPE html>
<html>
<head>
<style>
img.a {
  vertical-align: sub;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: baseline;
}

img.d {
  vertical-align: text-bottom;
}

img.e {
  vertical-align: super;
}
</style>
</head>
<body>
<h1>The vertical Property</h1>
<h2>vertical-align: sub</h2>
<p>An <img class="a" src="../CSS vertical align/1.jpg" > image with a sub alignment.</p> 
<h2>vertical-align: text-top</h2>
<p>An <img class="b" src="../CSS vertical align/1.jpg" > image with a text-top alignment.</p> 
<h2>vertical-align: baseline (default)</h2>
<p>An <img class="c" src="../CSS vertical align/1.jpg"> image with a default alignment.</p> 
<h2>vertical-align: text-bottom</h2>
<p>An <img class="d" src="../CSS vertical align/1.jpg"> image with a text-bottom alignment.</p>
<h2>vertical-align: sup</h2>
<p>An <img class="e" src="../CSS vertical align/1.jpg"> image with a super alignment.</p>
</body>
</html>
Output:

The vertical Property

vertical-align: sub

An image with a sub alignment.

vertical-align: text-top

An image with a text-top alignment.

vertical-align: baseline (default)

An image with a default alignment.

vertical-align: text-bottom

An image with a text-bottom alignment.

vertical-align: sup

An image with a super alignment.


Popular Tutorials