首页 > web前端 > css教程 > 为什么 `vertical-align` 不在 Div 内将内联/内联块元素居中?

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

Susan Sarandon
发布: 2024-12-23 14:17:17
原创
783 人浏览过

Why Doesn't `vertical-align` Center Inline/Inline-Block Elements Within a 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板