Question

vertical-align: middle is not working as expected.

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

The above link says this:

The element is placed in the middle of the parent element

However, in the below link, "world" is not placed in the middle of the parent element.

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

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

Answer 1

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

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

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

Answer 2

所以你需要在span内加span。它说，

元素位于父元素
的中间

所以，它必须在你的父元素里面，在这种情况下，我理解是span。除非您将p视为父级，否则您可以将class="hello"移至p代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

vertical-align: middle not working as expected

3 个答案: