Vertical align of text 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;
}

Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) — Daniel Beck, Feb 27 '18 at 13:30
There are so very, very, very many duplicates of this exact question -- if you're going to post another you really need to explain why one of those solutions isn't working for you. — Daniel Beck, Feb 27 '18 at 13:32
@daniel beck agreed i have seen several in the past month alone. — Jonny, Feb 27 '18 at 13:49

score 1 · Accepted Answer · answered Feb 27 '18 at 13:34

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

answered Feb 27 '18 at 13:34

Rinho

564
3
8

score 0 · Answer 2 · answered Feb 27 '18 at 13:31

0

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

answered Feb 27 '18 at 13:31

ristapk

1,342
3
15
27

It is good when I have one line inside span, but if I have more second line goes outside of parent div.. – punky Feb 27 '18 at 13:55

score 0 · Answer 3 · answered Feb 27 '18 at 13:33

0

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

answered Feb 27 '18 at 13:33

connor.gregson

61
2

score 0 · Answer 4 · answered Feb 27 '18 at 13:53

change in inlongDesc div the value of propertytext-align to center , then add the following 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;
}

score 0 · Answer 5 · answered Feb 27 '18 at 15:07

0

You can use flexbox

display: flex;
align-items: center;

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

answered Feb 27 '18 at 15:07

Marcus Crisostomo

148
8

Vertical align of text HTML/CSS

5 Answers5