Set vertical-align to baseline in HTML and CSS

Description

The following code shows how to set vertical-align to baseline.

Example


<!--  w ww . jav  a 2 s.  c  o m-->
<html>
<head>
<title>vertical-align</title>
<style type='text/css'>
td {
font: 12px sans-serif;
border: 1px solid black;
padding: 5px;
width: 100px;
}
td#baseline {
font-size: 50px;
vertical-align: baseline;
}
td#baseline-copy {
vertical-align: baseline;
}
td#top {
vertical-align: top;
}
td#middle {
vertical-align: middle;
}
td#bottom {
vertical-align: bottom;
}
</style>


</head>
<body>
<table>
<tbody>
<tr>
<td id='baseline-copy'>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Proin mauris nisl, tincidunt ut, aliquam nec,
ultrices id, sapien. Proin quis urna. Class aptent
taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos.
</td>
<td id='baseline'>Baseline</td>
<td id='top'>Top</td>
<td id='middle'>Middle</td>
<td id='bottom'>Bottom</td>
</tr>
</tbody>
</table>
</body>
</html>

Click to view the demo

The code above generates the following result.

Set vertical-align to baseline 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...
Compare vertical align values in HTML and C...
Set vertical align for table cells in HTML ...
Set vertical-align to 300% in HTML and CSS
Set vertical-align to 69px in HTML and CSS

Set vertical-align to baseline in HTML and ...