CSS Vertical-Align Property

In this chapter you will learn:
About vertical-align property
Values of this property
Example of this property

CSS vertical-align property is used to vertically align the element. This property helps to arrange or set the element to the adject position as you want for web page.

Values of this property
Values Description
baseline Used to vertical-align the baseline of the element
% Vertical-align in % (percent)
length align in px, cm etc.
top Vertically align the element from top
text-top Aligned with top of text of parent element
middle Aligned to middle of parent element
bottom Aligned bottom
text-bottom Alinged text to bottom
initial- Sets the default value
inherit Inherits from parent

Example of this property 

<html>
<head>
   <title>Example of vertical-align property</title>
    <style type="text/css">
        #a
        {
            vertical-align:top;
        }
        #b
        {
            vertical-align:bottom;
        }                   
           
    </style>
    </head>
<body>
<div><img src="css-icon.jpg" id="a"alt="css icon" /> This is the example of vertical-align:top</div>
<div><img src="css-icon.jpg"id="b" alt="css icon" /> This is the example of vertical-align:bottom</div>
</body>
</html>

Output:-
example of vertical-align property
SUMMARY

In this chapter, you have learned about the vertical-align property so now try to use this property in your program and click on Next button to continue learning-

 

Share your thought