/    /  CSS Vertical Align

CSS Vertical Align

 

CSS vertical-align property is used to provide the vertical alignment of an inline or table-cell box.

  • Applied to inline or inline-block elements.
  • Alignment of the element(not its content).
  • Applied to the table cells.

 

CSS Vertical Align Values:

 

  • baseline
  • length
  • %
  • sub
  • super
  • top
  • bottom
  • text-top
  • middle
  • text-bottom
  • initial
  • inherit

 

Example:

 

<!DOCTYPE html> 

<html> 
<head> 
<style> 
img.top { 
  vertical-align: text-top; 
} 
img.bottom { 
  vertical-align: text-bottom; 
} 
</style> 
</head> 
<body> 
<p><img src="good-morning.jpg" alt="Good Morning Friends"/> Default alignment.</p>  
<p><img src="good-morning.jpg" class="top" alt="Good Morning Friends"/> Text-top alignment.</p>  
<p><img src="good-morning.jpg" class="bottom" alt="Good Morning Friends"/> Text-bottom alignment.</p> 
</body> 
</html>

 

OUTPUT:

 

CSS Vertical Align