垂直对齐：中间没有按预期工作答案

【问题标题】：vertical-align: middle not working as expected垂直对齐：中间没有按预期工作
【发布时间】：2018-01-21 23:24:38
【问题描述】：

vertical-align: middle 未按预期工作。

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

上面的链接是这样说的：

元素放置在父元素的中间

但是，在下面的链接中，"world" 没有放在父元素的中间。

.hello {
  font-size: 32px;
  background-color: hotpink;
}

.world {
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
}

&lt;p&gt;&lt;span class="hello"&gt;Hello&lt;/span&gt; &lt;span class="world"&gt;world&lt;/span&gt;&lt;/p&gt;

【问题讨论】：

它必须成为中心。 .如果有父元素，可以将子元素中心设置为其父元素
如果你想在中间对齐文本，那是行不通的。
W3Schools 页面上的文字太短以至于容易产生误导。要是他们多花几句话解释就好了。并且“播放它”的例子也不是很有帮助。

标签： html css vertical-alignment

【解决方案1】：

您的第一个跨度大小比其他跨度大。所以 p 标签大小会根据更大的跨度而变化。因此，我必须在两个跨度上应用vertical-align：middle

 .hello {
   font-size: 32px;
   background-color: hotpink;
 }

p span {
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
}

【讨论】：

当您在世界级上添加垂直对齐 CSS 时。它应该如何理解哪个是中间点。给它的父母标签一些高度。

【解决方案2】：

所以你需要在span 中包含span。它说，

元素放置在父元素的中间

所以，它必须在您的父元素内，在这种情况下，我理解为span。除非，您将 p 视为父级，在这种情况下，您可以将 class="hello" 移动到 p 标记。

p {
  background-color: orange;
}
.hello {
  font-size: 32px;
  background-color: hotpink;
}

.world {
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
  display: table-cell;
}

<p><span class="hello">Hello <span class="world">world</span></span>
</p>

【讨论】：

我很好奇为什么"world" 不以<p> 标签为中心。
嗯，你可以使用display: table-cell;让它居中。

【解决方案3】：

试试下面的代码

<!DOCTYPE html>
<html>
<head>
<style>

.hello {
  font-size: 32px;
  background-color: hotpink;
}
span{
  
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
}

</style>
</head>
<body>

<p><span class="hello">Hello</span> <span>world</span></p>

</body>
</html>

【讨论】：