Search code examples
htmlcssvalign

Vertical align of text HTML/CSS

I see that many people ask this there, but I didn't found solution for my problem in given answers.

I have very simple situation there.

<div id="tooltipDesc"> <span id="longDesc">Lorem ipsum</span> </div>

I need text to be verticaly aligned to the middle od div.

This is my recent CSS:

#tooltipDesc{
 position: absolute;
 width: 300px;
 height: 80px;
 background-color: rgb(255, 255, 255);
 color: #6c6c6c;
 border: 1px black solid;
}

#longDesc{
  color: #6c6c6c;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: 280px;
  height: 78px;
}
Solution

  • You can easily achieve this with flexbox, or with absolute text positioning. Personally I prefer to use flexbox, with the following:

     display: flex;
 justify-content: center;
 align-items: center;

    Example on jsfiddle