clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS Vertical Align

Imperial Advance Hero Image

CSS Vertical Align

It is used to align element vertically.

 

Syntax -

vertical-align:value;

 

values

baseline

It is use to set element at baseline of parent element.

text-top It is use to set font at baseline of parent element
text-bottom
It is use to set font at bottom of parent element.
sub
It is use to set element at subscript baseline of the parent element
super
It is use to set element at superscript baseline of the parent element
middle
It is use to set element at middle of the parent element
bottom It is use to set element at bottom of the parent element
% Raises or lower an element by a percent of the "line-height" property. Negative values are allowed
top It is use to set element at top of the parent element
length Raises or lower an element by the specified length. Negative values are allowed.

 

For example -

<!DOCTYPE html>
<html>
    <title>CSS Vertical Alignment Property</title>

<head>
    <style>
        body {
            background-color: #eaebec;
        }

        #teknowizeDiv1 {
            height: 50px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #000000;
            margin:0.5rem 0;
        }

        #teknowizeDiv1 span {
            background: lightblue;
            vertical-align: baseline;
        }
        #teknowizeDiv2 {
            height: 50px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #000000;
            margin:0.5rem 0;
        }

        #teknowizeDiv2 span {
            background: lightblue;
            vertical-align: 25px;
            
        }
        #teknowizeDiv3 {
            height: 50px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #000000;
            margin:0.5rem 0;
        }

        #teknowizeDiv3 span {
            background: lightblue;
            vertical-align: 50%;
            
        }
        #teknowizeDiv4 {
            height: 50px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #000000;
            margin:0.5rem 0;
        }

        #teknowizeDiv4 span {
            background: lightblue;
            vertical-align: sub;
            
        }
        #teknowizeDiv5 {
            height: 50px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #000000;
            margin:0.5rem 0;
        }

        #teknowizeDiv5 span {
            background: lightblue;
            vertical-align: super;
            
        }
        #teknowizeDiv6 {
            height: 50px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #000000;
            margin:0.5rem 0;
        }

        #teknowizeDiv6 span {
            background: lightblue;
            vertical-align: top;
            
        }
        #teknowizeDiv7 {
            height: 50px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #000000;
            margin:0.5rem 0;
        }

        #teknowizeDiv7 span {
            background: lightblue;
            vertical-align: text-top;
            
        }
        #teknowizeDiv8 {
            height: 50px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #000000;
            margin:0.5rem 0;
        }

        #teknowizeDiv8 span {
            background: lightblue;
            vertical-align: middle;
            
        }
        #teknowizeDiv9 {
            height: 50px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #000000;
            margin:0.5rem 0;
        }

        #teknowizeDiv9 span {
            background: lightblue;
            vertical-align: bottom;
            
        }
        #teknowizeDiv10 {
            height: 50px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #000000;
            margin:0.5rem 0;
        }

        #teknowizeDiv10 span {
            background: lightblue;
            vertical-align: text-bottom;
            
        }
    </style>
</head>

<body>

    <h1>Vertical Alignment Property</h1>

    <div id="teknowizeDiv1">
        Hello friends, welcome to <span>teknowize</span> online learning platform. - baseline
    </div>
    <div id="teknowizeDiv2">
        Hello friends, welcome to <span>teknowize</span> online learning platform. - Length
    </div>
    <div id="teknowizeDiv3">
        Hello friends, welcome to <span>teknowize</span> online learning platform. - Percent
    </div>
    <div id="teknowizeDiv4">
        Hello friends, welcome to <span>teknowize</span> online learning platform. - sub
    </div>
    <div id="teknowizeDiv5">
        Hello friends, welcome to <span>teknowize</span> online learning platform. - sup
    </div>
    <div id="teknowizeDiv6"> 
        Hello friends, welcome to <span>teknowize</span> online learning platform. - top
    </div>
    <div id="teknowizeDiv7">
        Hello friends, welcome to <span>teknowize</span> online learning platform. - text-top
    </div>
    <div id="teknowizeDiv8">
        Hello friends, welcome to <span>teknowize</span> online learning platform. - middle
    </div>
    <div id="teknowizeDiv9">
        Hello friends, welcome to <span>teknowize</span> online learning platform. - bottom
    </div>
    <div id="teknowizeDiv10">
        Hello friends, welcome to <span>teknowize</span> online learning platform. - text-bottom
    </div>

</body>

</html>

 

Output

Vertical Alignment

CSS