为什么 `vertical-align` 不在 Div 内将内联/内联块元素居中？

垂直对齐内联/内联块元素

在尝试在 div 内垂直对齐多个内联和内联块元素时，用户遇到一个问题，即跨度元素在容器内的位置仍然低于预期。尽管应用了垂直对齐：中间；和垂直对齐：顶部；到跨度，对齐方式保持不变。

CSS 属性vertical-align 控制元素相对于文本基线的垂直定位。但是，此属性适用于要对齐的元素，而不是其父元素。要垂直对齐 div 内的子元素，用户应直接定位子元素：

div > * {
    vertical-align:middle;  // Align children to middle of line
}

此修订后的代码将确保 div 内的所有子元素垂直居中。请注意，vertical-align 相对于当前文本行对齐元素，而不是相对于父 div 的整个高度。如果目的是创建一个具有居中元素的更高的 div，则可以使用 line-height 属性而不是 height。有关工作示例，请参阅提供的 jsfiddle 链接：

[jsfiddle 链接]

以上是为什么 `vertical-align` 不在 Div 内将内联/内联块元素居中？的详细内容。更多信息请关注PHP中文网其他相关文章！