CSS Property vertical-align

vertical-align defines the vertical alignment of an inline element's baseline. Negative length and percentage values are permitted. In table cells, this property sets the alignment of the content of the cell within the cell box.

Summary

Item	Value
Initial value	baseline
Inherited	No.
Version	CSS1
JavaScript syntax	object.style.verticalAlign="bottom"
Applies to	Inline elements and table cells.

CSS Syntax

vertical-align: baseline | 
                bottom | 
                middle | 
                sub | 
                super | 
                text-bottom |   
                text-top | 
                top | 
                percentage | 
                length | 
                inherit

Property Values

The property values are listed in the following table.

Value	Description
baseline	Align element to the baseline of the parent element. This is default
sub	Align the element as <sub>
super	Align the element as <sup>
top	Align with the top of the tallest element on the line
text-top	Align with the top of the parent element's font
middle	Align to the middle of the parent element
bottom	Align to the lowest element on the line
text-bottom	Align the bottom of the parent element's font
inherit	Inherit vertical-align property from the parent element
length	Align the element by the specified length. Negative values are allowed
%	Align the element in a percent of the "line-height" property. Negative values are allowed

Browser compatibility


`vertical-align`	Yes	Yes	Yes	Yes	Yes

Example

An example showing how to use vertical-align CSS property.

<!DOCTYPE HTML>
<html>
<head>
  <style>
td {<!--from  w w  w.j av a  2  s . c o  m-->
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}
td.none {
  border-style: none;
}
.plain {
  color: #FF0000;
}
.baseline {vertical-align: baseline;}
.sub {     vertical-align: sub;}
.super {   vertical-align: super;}
.top {     vertical-align: top;}
.texttop { vertical-align: text-top;}
.middle {  vertical-align: middle;}
.bottom {  vertical-align: bottom;}
.textbottom{ vertical-align: text-bottom;}
.oneHundredPercent {
  vertical-align: 100%;
}

.fiftyPercent {
  vertical-align: 50%;
}
</style>
</head>
<body>
<table>
  <tr><td>
    <span class="plain">Plain text</span> 
    <span class="baseline">baseline</span>
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> 
    <span class="sub">sub</span>
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> 
    <span class="super">super</span>
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> 
    <span class="top">top</span>
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> 
    <span class="texttop">texttop</span>
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> 
    <span class="middle">middle</span>
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> 
    <span class="bottom">bottom</span>
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> 
    <span class="textbottom">textbottom</span>
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> 
    <span class="oneHundredPercent">100%</span>
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> 
    <span class="fiftyPercent">50%</span>
  </td></tr>
</table>
</body>
</html>

Click to view the demo