CODEWITHSUNDEEP
htmlcssvalign
punky
punky

Reputation: 153

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

Upvotes: -2

Views: 66

Answers (5)

Marcus Crisostomo
Marcus Crisostomo

Reputation: 148

You can use flexbox

display: flex;
align-items: center;

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

Upvotes: 0

GNETO DOMINIQUE
GNETO DOMINIQUE

Reputation: 677

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

Upvotes: 0

Rinho
Rinho

Reputation: 584

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

Upvotes: 1

connor.gregson
connor.gregson

Reputation: 61

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

Upvotes: 0

ristapk
ristapk

Reputation: 1372

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

Upvotes: 0

Related Questions