text vertical align top and bottom : vertical align « CSS « HTML / CSS






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

text vertical align top and bottom

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type='text/css'>
                p {
                    background: cyan;
                    margin: 10px;
                    font-size: 16px;
                }
                span {
                    font-weight: bold;
                    background: lightblue;
                }
                span > span {
                    font-size: 40px;
                    color: white;
                    background: steelblue;
                }
                span + span {
                    font-size: 20px;   
                }
                span#text-top {
                    vertical-align: text-top;
                }
                span#top {
                    vertical-align: top;
                }
                span#text-bottom {
                    vertical-align: text-bottom;
                }               
                span#bottom {
                    vertical-align: bottom;
                }
            </style>
        </head>
        <body>
            <p>
                <span>
                   A
                        <span id='text-top'>A</span> 
                        <span id='top'>A.</span>
                </span>
            </p>
            <p>
                <span>
                    A
                        <span id='text-bottom'>A</span>
                        <span id='bottom'>A</span>
                </span>
            </p>
        </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: baseline;
15.vertical-align: middle;
16.vertical-align: text-bottom;
17.vertical-align: 200%;
18.vertical-align: 46px;
19.vertical align 20px
20.vertical align 20px for image
21.vertical align 100 percent
22.vertical align 100 percent image
23.vertical align bottom
24.vertical align bottom for image
25.vertical align middle for image
26.vertical align: sub and super
27.vertical align table cells
28.vertical-align:baseline;sub;super;top;text-top;middle;bottom;text-bottom;
29.text vertical align: baseline top middle bottom
30.vertical align text: top and bottom
31.vertical-align: 300%
32.vertical align: sub
33.vertical align: super
34.vertical-align: middle
35.Vertical align elements of different heights
36.Aligned to baseline, lowered to baseline and raised to baseline
37.The image is vertically aligned using the value top
38.The image is vertically aligned using the value text-bottom
39.The image is vertically aligned using the value text-top
40.The image is vertically aligned using the value baseline
41.The image is vertically aligned using the value middle
42.The image is vertically aligned using the value sub
43.The image is vertically aligned using the value super
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.