locked
How do I vertically center text with CSS? RRS feed

  • Question

  • User822656046 posted

    I have a div element which contains text, and I want to align the contents of this div vertically center.

    Here is my div style:

    #box {
      height: 170px;
      width: 270px;
      background: #000;
      font-size: 48px;
      color: #FFF;
      text-align: center;
    }
    <div id="box">
      Lorem ipsum dolor sit
    </div>
    here is website link for example vertical menu

    What is the best way to do this?


    Monday, May 20, 2019 10:13 AM

Answers

All replies

  • User-821857111 posted
    #box {
      height: 170px;
      width: 270px;
      background: #000;
      font-size: 48px;
      color: #FFF;
      text-align: center;
    vertical-align: top;
    display: table-cell;
    }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 20, 2019 12:18 PM
  • User-2054057000 posted

    You add the following CSS to your element:

    height: 100px;
    display: flex;
    align-items: center;

    There is a very nice tutorial that covers multiple solutions for doing this: 7 Common Web Development problems which every developer from Beginners to Experts should know [with multiple solutions]

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 21, 2019 4:18 AM
  • User-1151440187 posted

    Use the line-height property.

    #box {
    background: #000;
    font-size: 48px;
    color: #FFF;
    line-height: 200px;
    }
    div p
    {
    vertical-align: middle;
    }

    <div id="box">
    <p>Lorem ipsum dolor sit</p>
    </div>

    I hope this will help you.

    Tuesday, April 7, 2020 4:40 AM