CSS Vertical Align

CSS Vertical Align Property

CSS vertical-align Property vertically align the text or inline elements, inline-block and table cells elements. The default value of vertical-align is baseline.

We can also use vertical-align in images.

Change vertical-align.

vertical-align baseline

vertical-align baseline is the default value of vertical-align. By-default, all text and images are vertically aligned from baseline.

  <style>
  h1 small{
    vertical-align:baseline;
  }
  </style>
  <h1>Vertical align <small>baseline</small> </h1>

vertical-align bottom

vertical-align bottom is used to vertical align text/images or other inline/inline-block elements from bottom.

    <style>
    h1 small{
      vertical-align:bottom;
    }
    </style>
    <h1>Vertical align <small>bottom</small> </h1>
  

vertical-align middle

vertical-align middle is used to vertical align text/images or other inline/inline-block elements from middle.

<style>
h1 small{
  vertical-align:middle;
}
</style>
<h1>Vertical align <small>middle</small> </h1>

vertical-align top

vertical-align top is used to vertical align text/images or other inline/inline-block elements from top.

<style>
h1 small{
  vertical-align:top;
}
</style>
<h1>Vertical align <small>top</small> </h1>

vertical-align super

vertical-align super is used to vertical align text/images or other inline/inline-block elements from superscript.

<style>
h1 small{
  vertical-align:super;
}
</style>
<h1>Vertical align <small>super</small> </h1>

vertical-align sub

vertical-align sub is used to vertical align text/images or other inline/inline-block elements from subscript.

<style>
h1 small{
  vertical-align:sub;
}
</style>
<h1>Vertical align <small>sub</small> </h1>