vertical-align: baseline; : vertical align « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. vertical align

vertical-align: baseline;

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <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>








Related examples in the same category

1.'vertical-align' Example
2.vertical-align possible values
3.vertical-align: text-bottom
4.vertical align: baseline
5.vertical-align: text-top
6.vertical align: middle
7.vertical align: bottom
8.vertical-align: super
9.vertical-align: sub
10.vertical-align: top;
11.vertical-align: bottom;
12.vertical-align: 300%;
13.vertical-align: 69px;
14.vertical-align: middle;
15.vertical-align: text-bottom;
16.vertical-align: 200%;
17.vertical-align: 46px;
18.vertical align 20px
19.vertical align 20px for image
20.vertical align 100 percent
21.vertical align 100 percent image
22.vertical align bottom
23.vertical align bottom for image
24.vertical align middle for image
25.vertical align: sub and super
26.vertical align table cells
27.vertical-align:baseline;sub;super;top;text-top;middle;bottom;text-bottom;
28.text vertical align: baseline top middle bottom
29.vertical align text: top and bottom
30.vertical-align: 300%
31.vertical align: sub
32.vertical align: super
33.vertical-align: middle
34.Vertical align elements of different heights
35.Aligned to baseline, lowered to baseline and raised to baseline
36.The image is vertically aligned using the value top
37.The image is vertically aligned using the value text-bottom
38.The image is vertically aligned using the value text-top
39.The image is vertically aligned using the value baseline
40.The image is vertically aligned using the value middle
41.The image is vertically aligned using the value sub
42.The image is vertically aligned using the value super
43.text vertical align top and bottom
44.The length is offset from the bottom of the line-height.
45.The percentage value is a percentage of the line-height value
46.The text-top and text-bottom keyword align to the tallest and lowest character, respectively.