vertical-align
Description
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.
| Item | Value |
|---|---|
| Initial value | baseline |
| Inherited | No. |
| Version | CSS1 |
| JavaScript syntax | object.style.verticalAlign="bottom" |
| Applies to | Inline elements and table cells. |
Syntax and Property Values
vertical-align: baseline | // w ww. j a va2s . c o m
bottom |
middle |
sub |
super |
text-bottom |
text-top |
top |
percentage |
length |
inherit
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 |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
td {<!-- w w w .ja va 2 s .co 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"> </td></tr>
<tr><td>
<span class="plain">Plain text</span>
<span class="sub">sub</span>
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span>
<span class="super">super</span>
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span>
<span class="top">top</span>
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span>
<span class="texttop">texttop</span>
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span>
<span class="middle">middle</span>
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span>
<span class="bottom">bottom</span>
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span>
<span class="textbottom">textbottom</span>
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span>
<span class="oneHundredPercent">100%</span>
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span>
<span class="fiftyPercent">50%</span>
</td></tr>
</table>
</body>
</html>
The code above generates the following result.
