文本 HTML/CSS 的垂直对齐

Question

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;
}

Answer 1

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

Answer 2

Just add line-height, like this:

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

Answer 3

If it's just text use:

html:

<p class= "example"; > Lorem ipsum  </p>

css:

.example{
  text-align: center;
}

useful link: https://www.w3schools.com/cssref/pr_text_text-align.asp

Answer 4

change in in longDesc div the value of property text-align to center , then add the following position:absolute; top:35%; position:absolute; top:35%; finaly make a change in tooltipDesc position:relative as illustrated below.

#tooltipDesc{
 position: relative;  /* has been changed */
 width: 300px;
 height: 80px;
 background-color: rgb(255, 255, 255);
 color: #6c6c6c;
 border: 1px black solid;
}

#longDesc{
 position:absolute; /* has been added */
 color: #6c6c6c;
 display: inline-block;
 text-align: center; /* has been changed */
 top:35%;  /* has been added */
 line-height: normal;
 width: 280px;
 height: 78px;
}  

Answer 5

You can use flexbox

display: flex;
align-items: center;

See in action: https://jsfiddle.net/ex5gww6y/2/