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

ItemValue
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