Vertical-align

Contact Us or call 1-877-932-8228
Vertical-align

Vertical-align

The vertical-align property is used to indicate how inline content should be aligned vertically relative to sibling inline content. The values are listed below:

  • bottom
  • middle
  • top
  • text-bottom
  • baseline
  • text-top
  • sub
  • super

The following code sample shows the effects vertical-align:

Code Sample:

CssText/Demos/VerticalAlign.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Vertical-Align</title>
</head>
<body>
<h1>Vertical-Align</h1>

<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	<img src="Images/block.gif" width="100" height="100" 
		alt="block" style="vertical-align: bottom;">
	vertical-align:bottom
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	<img src="Images/block.gif" width="100" height="100" 
		alt="block" style="vertical-align: middle;">
	vertical-align:middle
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	<img src="Images/block.gif" width="100" height="100" 
		alt="block" style="vertical-align: top;">
	vertical-align:top
</div>

<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	<img src="Images/block.gif" width="100" height="100" 
		alt="block" style="vertical-align: text-bottom;">
	vertical-align:text-bottom
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	<img src="Images/block.gif" width="100" height="100" 
		alt="block" style="vertical-align: baseline;">
	vertical-align:baseline
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	<img src="Images/block.gif" width="100" height="100" 
		alt="block" style="vertical-align: text-top;">
	vertical-align:text-top
</div>

<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	vertical-align:<span style="vertical-align: sub; color: blue;">sub</span>
</div>
<div style="border-top: 1px solid red;
			border-bottom: 1px solid red; font-size: 1.5em;">
	vertical-align:<span style="vertical-align: super; color: blue;">super</span>
</div>

</body>
</html>

The above code will render the following:Vertical Align

Next