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.

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads