How to Vertically Align Text Within a Div in CSS ?

Last Updated : 26 Apr, 2023

In this article, we will learn how to align the text vertically inside the div using CSS. We can align the center blocks vertically, by combining a few properties. The trick is to specify the outer block to be formatted as a table cell because the contents of a table cell can be centered vertically. We will use the vertical-align property that specifies the vertical alignment of the table box or inline element.

Syntax: To vertically align text within a div, we use the vertical-align property in CSS. The syntax for the vertical-align property is:

div {
    vertical-align: top|middle|bottom;
}

Approaches: There are different approaches to vertically aligning text within a div. Some of the commonly used approaches are:

Using line-height property
Using CSS vertical-align property
Using Padding property

Using line-height: Using the line-height property is the easiest and most commonly used approach to align text within a div vertically. The line-height property sets the height of a line box, which is the area that contains the text. By setting the line height equal to the height of the container, we can center the text vertically.

Syntax:

div {
    height: 200px;
    line-height: 200px;
}

Example: In this example, we set the height & the line height of the div container.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <style> 
        div { 
            height: 200px; 
            font-size: 30px; 
            line-height: 200px; 
            border: 2px dashed black; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        GeeksforGeeks 
    </div> 
</body> 
</html>

Output:

Using vertical-align property: The vertical-align property in CSS is used to specify the vertical alignment of the table box or inline element. With the help of this property, you may change the vertical alignment of the table cell or inline element and change the position of the text within it.

Syntax:

.container {
    display: table-cell;
    vertical-align: middle;
}

Example: In this example, we use the vertical-align property to provide vertical alignment to the element.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
          Vertical-align property 
      </title> 
    <style> 
        .container { 
            display: table-cell; 
            width: 600px; 
            height: 400px; 
            border: 2px dashed black; 
            vertical-align: middle; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
          GeeksforGeeks 
      </div> 
</body> 
</html>

Output:

Using padding property: In this method, we use the padding property, we provide equal padding on top and bottom to our parent element.

Syntax:

.container {
    padding: 20% 0;
}

Example: In this example, we use the padding property for our parent element with equal top and bottom padding properties by setting the padding-top is 20% and bottom at 0 on the container.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
          Vertical alignmenet with the 
        help of padding property 
    </title> 
    <style> 
        .container { 
            padding: 20% 0; 
            border: 2px dashed black; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <p>GeeksforGeeks</p> 
    </div> 
</body> 
</html>