How can I vertically align elements in a div?

HTML Web Development Front End Technology

We can easily vertically align elements in a div using any of the following ways −

The position property
The line-height property
The padding property

Let us see the examples one by one −

Vertically align elements in a div using the position property

The position property is used in positioning an element. It can be used in conjunction with the top, right, bottom and left properties to position an element where you want it. Here are the possible values of the position property −

static − The element box is laid out as a part of the normal document flow, following the preceding element and preceding following elements.
relative − The element's box is laid out as a part of the normal flow, and then offset by some distance.
absolute − The element's box is laid out in relation to its containing block, and is entirely removed from the normal flow of the document.
fixed − The element box is absolutely positioned, with the behaviors described for position: absolute. The major difference is that the containing block of a fixed-position element is always the viewport.

Let us now see an example to Vertically align elements in a div using the position property −

Example


<!DOCTYPE html>
<html>
<head>
   <title>Align Elements</title>
   <style>
      #demo1 {
         position: relative;
      }
      #demo2 {
         position: absolute;
         top: 50%;
         height: 100px;
         margin-top: -50px;
      }
      #demo1 {
         background-color: yellow;
         border: 2px solid gray;
         height: 15em;
      }
      #demo2 {
         background-color: skyblue;
         border: 1px solid orange;
         width: 100%;
      }
   </style>
</head>
<body>
   <h1>Vertically Align Elements</h1>
   <p>Use the position property:</p>
   <div id="demo1">
      <div id="demo2">
         <p>This is a demo text</p>
         <p>This is another demo text</p>
      </div>
   </div>
</body>
</html>

Vertically align elements in a div using the line-height property

The line-height property modifies the height of the inline boxes which make up a line of text. Here are the possible values of the line-height −

normal − Directs the browser to set the height of lines in the element to a "reasonable" distance.
number − The actual height of lines in the element is this value multiplied by the font-size of the element.
length − The height of lines in the element is the value given.
percentage − The height of lines in the element is calculated as a percentage of the element's font-size.

Let us now see an example to Vertically align elements in a div using the line-height property −

Example


<!DOCTYPE html>
<html>
<head>
   <title>Align Elements</title>
   <style>
      p {
         margin: 0;
      }
      #demo {
         border: 3px solid yellow;
         background-color: orange;
         height: 100px;
         line-height: 100px;
      }
   </style>
</head>
<body>
   <h1>Vertically Aligned Element</h1>
   <p>Use the line-height property:</p>
   <div id="demo">
      <p>This is demo text</p>
   </div>
</body>
</html>

Vertically align elements in a div using the padding property

The padding property allows you to specify how much space should appear between the content of an element and its border. The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.

The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties −

The padding-bottom specifies the bottom padding of an element.
The padding-top specifies the top padding of an element.
The padding-left specifies the left padding of an element.
The padding-right specifies the right padding of an element.
The padding serves as shorthand for the preceding properties.

Let us now see an example to Vertically align elements in a div using the padding property −

Example


<!DOCTYPE html>
<html>
<head>
   <title>Align Element</title>
   <style>
      .demo {
         padding: 60px 0;
         border: 2px solid #5c34eb;
         background-color: orange;
      }
   </style>
</head>
<body>
   <h1>Vertically Align Element</h1>
   <p>Use the padding property:</p>
   <div class="demo">
      <p>This is demo text.</p>
      <p>This is another text.</p>
   </div>
</body>
</html>