CSS vertical align – How to vertical align in CSS using vertical-align property

CSS vertical align property

The vertical align property is used to align elements vertically. Note that when applied it will align only in-line elements or inline-block elements. Also as mentioned, it will align element only and not its content. For example div is a block element. If you try vertical align in Div, it won’t work. However if vertical-align is assigned to input item (which is inline element) or span etc inside Div, it will work.

In case of table cells, however the case is different. The vertical-align property will affect content of table cell not the cell itself.


Syntax of vertical align

vertical-align: value;

Where value can be either of following:

  • baseline: which is default. This aligns specified element to the baseline of parent element. E.g. span inside div.
  • text-top: aligns top of child element to parents top of text.
  • text-bottom: aligns bottom of child element to parents bottom of text.
  • top: This aligns child element top to the tallest element inline
  • bottom:
  • middle:
  • super: Aligns as super script.
  • sub: Aligns as sub script.


Using vertical align property with Div text and input type

In this example a div (parent) is created with line height. A child element input type is assigned vertical align property.

Experience this example online


CSS text vertical align in Div  

This example will apply vertical align to span element, child of Div, as super value.

Experience this example online


Also see CSS text color

Was this article helpful?

Related Articles

Leave A Comment?