垂直对齐内联/内联块元素
在尝试在 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中文网其他相关文章!