vertical-align possible values
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Example</title>
<style rel="stylesheet" type="text/css">
body {
color: #000000;
background-color: #ffffff;
font-family: arial, verdana, sans-serif;
font-size: 12px;
}
td {
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>
<h1>vertical-align</h1>
<table>
<tr><td>
<span class="plain">Plain text</span> <span class="baseline">baseline</span><img class="baseline" src="images/block.gif" width="50" height="50" alt="block" />
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="sub">sub</span><img class="sub" src="images/block.gif" width="50" height="50" alt="block" />
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="super">super</span><img class="super" src="images/block.gif" width="50" height="50" alt="block" />
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="top">top</span><img class="top" src="images/block.gif" width="50" height="50" alt="block" />
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="texttop">texttop</span><img class="texttop" src="images/block.gif" width="50" height="50" alt="block" />
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="middle">middle</span><img class="middle" src="images/block.gif" width="50" height="50" alt="block" />
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="bottom">bottom</span><img class="bottom" src="images/block.gif" width="50" height="50" alt="block" />
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="textbottom">textbottom</span><img class="textbottom" src="images/block.gif" width="50" height="50" alt="block" />
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="oneHundredPercent">100%</span><img class="100percent" src="images/block.gif" width="50" height="50" alt="block" />
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="fiftyPercent">50%</span><img class="50percent" src="images/block.gif" width="50" height="50" alt="block" />
</td></tr>
</table>
</body>
</html>
Related examples in the same category