Skip to content
Related Articles

Related Articles

How to vertically center text with CSS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jun, 2022
View Discussion
Improve Article
Save Article

In this article, we will learn how to align the text vertically using CSS & Although CSS2 doesn’t support Vertical aligning. But, 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:

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
DIV {
  GeeksforGeeks
}

Example: This example describes the use of the vertical-align property along with the display property as table-cell.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Horizontal and Vertical alignment</title>
    <style>
    div {
        height: 200px;
        width: 400px;
        border: 2px dashed #4b2869;
    }
      
    .container {
        min-height: 10em;
        display: table-cell;
        vertical-align: middle;
    }
    </style>
</head>
  
<body>
    <div class="container">GeeksforGeeks</div>
</body>
  
</html>

Output:

There is a more versatile approach to align text vertically.It will work for a single line as well as multiple lines of text, but it will still require a fixed height container.

Syntax:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

The CSS just sizes the div, vertically center aligns the span by setting the div’s line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.

Example: This example describes aligning the content vertically with a fixed height of the container.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Horizontal and Vertical alignment </title>
    <style>
    div {
        height: 200px;
        line-height: 200px;
        text-align: center;
        border: 2px dashed #f69c55;
    }
      
    span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }
    </style>
</head>
  
<body>
    <div>
      <span>GeeksforGeeks</span
      </div>
</body>
  
</html>

Output:

CSS is the foundation of web pages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!