ADVERTISEMENT
ADVERTISEMENT

CSS vertical-align Property

Learn about the CSS vertical-align Property, its usages, syntax and examples.
Submitted by Shahnail Khan, on April 04, 2022

The proper alignment of items in a webpage is one of the most important aspects of web design. Various CSS properties are available for specifying the proper positioning of HTML elements. In this article, we'll talk about the vertical-align property, which is one of the most important properties to set the alignment of an element.

What is CSS vertical-align Property?

The vertical-align property specifies that an element is vertically aligned inside a container. The default value is baseline.

Note: This property can't be used to vertically align block-level elements like, <p>, <div>, <h1>, etc.

Syntax:

vertical-align: baseline| bottom| initial| inherit| length| middle| sub |super| text-bottom| text-top

Quick overview of the syntax used,

Value Explanation
baseline Default value. Vertical alignment of elements at the baseline of container.
bottom Vertical alignment of the element at the bottom of the container.
length Vertical alignment of the element by the specified length.
middle Vertical alignment of the element at the center of the container.
sub Vertical alignment of the element at the subscript baseline of the container.
super Vertical alignment of the element at the superscript baseline of the container.
text-bottom The element is aligned with the lowest element on the line.

The example given below illustrates CSS vertical-align Property

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>vertical-align</title>
   </head>
   
   <style>
      #container{
      border: 4px solid red;
      font-size: x-large;
      }
      span{
      background-color: aqua;
      vertical-align: sub;
      }
   </style>
   
   <body>
      <div id="container">
         <p>This element is not vertically aligned</p>
         <span>This element is vertically aligned</span>
      </div>
   </body>
</html>

Output:

CSS vertical-align Property | Example 1

Since the property value is set to sub, the baseline of an element is vertically aligned with the subscript-baseline of the container.

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>vertical-align</title>
   </head>
   
   <style>
      #container{
      font-size: x-large;
      background-color: blueviolet;   
      }
      span{
      vertical-align: 30px;
      }
   </style>
   
   <body>
      <div id="container">
         This image is vertically aligned<span><img src="https://media.istockphoto.com/photos/mountain-landscape-
            picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" width="200px"></span>
      </div>
   </body>
</html>

Output:

CSS vertical-align Property | Example 2

As you can see, the vertical-align property raises an element (image) by 30px.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.