How to align text vertically center in a DIV element using CSS?

How to align text vertically center in a DIV element using CSS?

Asked on October 30, 2018 in HTML / CSS.
Add Comment


  • 3 Answer(s)

         By using the CSS property “line-height”

         To align the text inside a div using the CSS rule vertical-align: middle; It won’t succeed.
    Instead if you have a div element with the height of 50px and you have placed some link inside the div that you want align vertically center.
    The best way to do it is — just apply the line-height property with value equal to the height of div which is 50px.

    For example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Align Text Vertically Center Using CSS</title>
    <style type="text/css">
        .menu{
            height: 20px;
            line-height: 20px;
            padding: 15px;
            border: 1px solid #666;
        }
    </style>
    </head>
    <body>
        <div class="menu">
            <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>
        </div>
    </body>
    </html>
    

     

    Answered on October 30, 2018.
    Add Comment
    div {
      height: 90px;
      line-height: 90px;
      text-align: center;
      border: 2px dashed #f69c55;
    }
    <div>
      Hello World!
    </div>

    It only works for a single line of text though, because we set the line’s height to the same height as the containing box element.


    A more versatile approach

    This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:

    div {
      height: 200px;
      line-height: 200px;
      text-align: center;
      border: 2px dashed #f69c55;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      line-height: normal;
    }
    <div>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
    </div>

    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.


    Simulating table display

    And here is another option, which may not work on older browsers that don’t support display: table and display: table-cell (basically just Internet Explorer 7). Using CSS we simulate table behavior (since tables support vertical alignment), and the HTML is the same as the second example:

    div {
      display: table;
      height: 100px;
      width: 100%;
      text-align: center;
      border: 2px dashed #f69c55;
    }
    span {
      display: table-cell;
      vertical-align: middle;
    }
    <div>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    Answered on February 24, 2019.
    Add Comment

    For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block level.

    html, body {
        height: 100%;
    }
    .parent {
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
    }
    .parent > .child {
        display: table-cell;
        vertical-align: middle;
    }
    Answered on February 24, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.