文本 HTML/CSS 的垂直对齐答案

【问题标题】：Vertical align of text HTML/CSS文本 HTML/CSS 的垂直对齐
【发布时间】：2018-02-27 23:07:53
【问题描述】：

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

我的情况很简单。

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

【问题讨论】：

How do I vertically center text with CSS?的可能重复
这个确切的问题有非常非常非常多的重复项——如果您要发布另一个问题，您真的需要解释为什么其中一个解决方案不适合您。
@daniel beck 同意我仅在过去一个月就见过几个。

标签： html css valign

【解决方案1】：

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

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

Example on jsfiddle

【讨论】：

【解决方案2】：

只需添加行高，如下所示：

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

【讨论】：

在 span 中有一行时很好，但如果我有更多的第二行超出父 div..

【解决方案3】：

如果只是文字使用：

html:

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

css:

.example{
  text-align: center;
}

有用的链接：https://www.w3schools.com/cssref/pr_text_text-align.asp

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

你可以使用弹性盒子

display: flex;
align-items: center;

实际操作：https://jsfiddle.net/ex5gww6y/2/

【讨论】：