解决 display: inline-block + vertical-align 多行文本居中难题
使用 display: inline-block
和 vertical-align: middle
布局多行文本时,常常无法实现理想的垂直水平居中效果。本文将分析原因并提供解决方案。
问题根源在于:vertical-align: middle
基于元素的基线(baseline)进行对齐。对于单行文本,基线清晰易懂;但多行文本的基线则变得模糊,导致居中效果失效。
解决方案:
完善HTML结构: 确保HTML结构完整,包含必要的 巧用 line-height: 父元素的 子元素 line-height 设置: 为子元素设置 修正后的代码示例: 通过以上调整,多行文本即可实现精确的垂直和水平居中。 记住,父元素的 等元素,避免结构性问题导致布局错误。
line-height
属性至关重要。它决定了行高,并影响“幽灵节点”的基线位置。 父元素的高度应与 line-height
值一致,确保文本垂直居中。line-height: normal
。这能避免子元素继承父元素的 line-height
,从而避免干扰垂直居中效果。<!DOCTYPE html>
height
和 line-height
的协调一致是解决问题的关键。