Compare vertical-align possible values in HTML and CSS

Description

The following code shows how to compare vertical-align possible values.

Example


<html>
<head>
<style rel="stylesheet" type="text/css">
td {<!--  www  . j  av a2 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>
<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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

Click to view the demo

The code above generates the following result.

Compare vertical-align possible values in HTML and CSS

Home »
  HTML CSS Tutorial »
    Text »
      CSS Text Style

...
Set paragraph line-height to 150% in HTML a...
Compare text-align all possible values in H...
Set text-align to center in HTML and CSS
Set text-align to justify in HTML and CSS
Set text align to justify to paragraph in H...
Set text-align to left in HTML and CSS
Set text-align to right in HTML and CSS
Compare text-decoration in HTML and CSS
Set text-decoration to line-through in HTML...
Set text-decoration to none for visited anc...
Set text-decoration to overline in HTML and...
Set text-decoration to underline in HTML an...
Set text-decoration to underline overline i...
Set text-decoration to underline overline l...
Compare text-transform in HTML and CSS
Set text-transform to capitalize in HTML an...
Set text-transform to lowercase in HTML and...
Set text-transform to uppercase in HTML and...
Compare all vertical-align settings in HTML...

Compare vertical-align possible values in H...