文本垂直对齐 HTML/CSS

Question

我看到很多人在那里问这个问题，但我没有在给定的答案中找到解决我的问题的方法。

我那里的情况很简单。

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

我需要文本垂直对齐到中间 od div。

这是我最近的 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

只需添加 line-height，像这样：

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

Answer 2

如果只是文本使用：

html:

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

css:

.example{
  text-align: center;
}

有用link：https://www.w3schools.com/cssref/pr_text_text-align.asp

Answer 3

您可以使用 flexbox 或绝对文本定位轻松实现此目的。我个人更喜欢使用 flexbox，如下所示：

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

Example on jsfiddle

Answer 4

将 longDesc div 中属性text-align 的值更改为 center ，然后添加以下 position:absolute; top:35%; 最后在 [=15 中进行更改=] 如下图所示。

#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

你可以使用 flexbox

display: flex;
align-items: center;

查看实际效果：https://jsfiddle.net/ex5gww6y/2/

文本垂直对齐 HTML/CSS

Vertical align of text HTML/CSS

html

css

valign