Control the vertical alignment
Description
vertical-align controls the element vertical alignment.
Its possible values are:
- baseline - Default value. Align the baseline of the element with the baseline of the parent element.
- length - Raises or lower an element by the specified length. Negative values are allowed.
- % - Raises or lower an element in a percent of the "line-height" property. Negative values are allowed.
- sub - Align the element as subscript.
- super - Aligns the element as superscript.
- top - The top of the element is aligned with the top of the tallest element on the line.
- text-top - The top of the element is aligned with the top of the parent element's font
- middle - The element is placed in the middle of the parent element
- bottom - The bottom of the element is aligned with the lowest element on the line
- text-bottom - The bottom of the element is aligned with the bottom of the parent element's font
Example
<html>
<head>
<title>vertical-align</title>
<style type='text/css'>
p {<!-- w w w .jav a 2s. c o m-->
font: 12px sans-serif;
}
span.line {
border: 1px solid rgb(200, 200, 200);
background: rgb(244, 244, 244);
font-size: 100px;
}
span.line span {
vertical-align: 300%;
font-size: 20px;
background: white;
border: 1px solid black;
}
span#top {
vertical-align: top;
}
span#middle {
vertical-align: middle;
}
span#bottom {
vertical-align: bottom;
}
span#text-top {
vertical-align: text-top;
}
span#text-bottom {
vertical-align: text-bottom;
}
span#super {
vertical-align: super;
}
span#sub {
vertical-align: sub;
}
span#percent {
vertical-align: 300%;
}
span#fixvalue {
vertical-align: 69px;
}
</style>
</head>
<body>
<p>
The vertical-align property is used in two scenarios: to
vertically align inline elements with respect to the line
box, and to vertically align the contents of table cells.
</p>
<p>
When vertically aligning inline elements within a line box,
the vertical-align property can be used with the keywords
top, middle, bottom, text-top, text-bottom.
</p>
<p>
<span class='line'>
Gg
<span id='top'>Top</span>
<span id='middle'>Middle</span>
<span id='bottom'>Bottom</span>
<span id='text-top'>Text Top</span>
<span id='text-bottom'>Text Bottom</span>
<span id='super'>super</span>
<span id='sub'>sub</span>
<span id='percent'>percent</span>
<span id='fixvalue'>fixvalue</span>
</span>
</p>
</body>
</html>
Example 2
The following code uses vertical-align to control the vertical alignment in a table cell.
<!--from w w w . j a v a 2 s. c o m-->
<html>
<head>
<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>