多行文本垂直居中：display: inline-block 和 vertical-align 的局限性及解决方法是什么？-css教程-PHP中文网

多行文本垂直居中：display: inline-block 和 vertical-align 的局限性及解决方法是什么？

花韻仙語

发布： 2025-02-21 22:40:28

原创

454人浏览过

多行文本垂直居中：display: inline-block 和 vertical-align 的局限性及解决方法是什么？

使用display: inline-block和vertical-align实现多行文本垂直居中的局限性

display: inline-block结合vertical-align常用于文本垂直居中，但多行文本时效果不佳。这是因为“幽灵节点”的基线在多行文本中位置变化导致的。

幽灵节点基线的影响

display: inline-block元素内部会生成一个“幽灵节点”，其高度与父元素的行高(line-height)相同。vertical-align: middle将元素垂直居中于幽灵节点的中线。单行文本时，幽灵节点基线与文本基线一致；多行文本时，幽灵节点基线会位于底行文本基线下方，导致垂直居中失效。

解决方案：消除幽灵节点基线的影响

Bertha.ai

一款专为WordPress打造的AI内容和图像创建工具

120

查看详情

为了在多行文本场景下实现垂直居中，需要解决幽灵节点基线与文本基线错位的问题。方法是移除或调整幽灵节点的行高。

以下代码示例演示了如何通过设置line-height: normal来解决这个问题，实现多行文本垂直居中：

<div class="parent">
  <div class="child">
    测试示例测试示例测试示例测试示例测试示例测试示例<br><br>
    测试示例测试示例测试示例测试示例测试示例测试示例<br><br>
    测试示例测试示例测试示例测试示例测试示例测试示例
  </div>
</div>

登录后复制

.parent {
  height: 100px;
  background-color: aqua;
  text-align: center; /* 水平居中 */
}

.child {
  color: #fff;
  background-color: blueviolet;
  vertical-align: middle;
  line-height: normal; /* 关键：将行高设置为normal */
  display: inline-block;
}

登录后复制

通过将.child元素的行高设置为normal，我们消除了幽灵节点的影响，从而实现了多行文本的垂直居中。

以上就是多行文本垂直居中：display: inline-block 和 vertical-align 的局限性及解决方法是什么？的详细内容，更多请关注php中文网其它相关文章！