vertical-align仅对行内、行内块和表格单元格元素有效，常用于图片与文字对齐、inline-block元素对齐等场景，通过设置baseline、top、middle等值调整垂直位置，解决默认基线对齐导致的空白或错位问题。
在CSS布局中，vertical-align 是控制行内元素或表格单元格内容垂直对齐方式的重要属性。很多人在使用它时会感到困惑，尤其是当它“看起来没生效”时。其实关键在于理解它的适用范围和作用机制。
vertical-align 适用于哪些元素？
这个属性只对行内元素（inline）、行内块元素（inline-block）以及表格单元格（table-cell）起作用。对块级元素设置 vertical-align 是无效的。
常见使用场景包括：
图片与文字的垂直对齐 多个 inline-block 元素之间的对齐 表格中单元格内容的垂直对齐
常用取值及效果说明
vertical-align 支持多种取值，最常用的有：
立即学习“前端免费学习笔记（深入）”；
baseline：默认值，对齐基线。文本和图像通常按基线对齐，但有时会产生意外空隙 top：顶部对齐，元素的顶端与整行的顶端对齐 middle：居中对齐，元素的垂直中心与父行的基线加上小写字母x的中点对齐 bottom：底部对齐，元素底端与整行最低点对齐 text-top：对齐父元素的字体顶部 text-bottom：对齐父元素的字体底部 长度值或百分比：如 vertical-align: 5px 或 vertical-align: -20%，可微调位置
图片与文字对齐实战技巧
图片默认是 inline 元素，会与文字基线对齐，常在图片下方留下空白缝隙。解决方法之一就是使用 vertical-align：
Fireflies.ai
自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。
145 查看详情
例如：
img { vertical-align: middle;}
这样图片就会和文字垂直居中对齐，视觉上更协调。若想完全消除底部空白，也可设为 vertical-align: top 或 bottom，取决于布局需求。
inline-block 元素间的对齐问题
当使用 display: inline-block 布局时，元素默认仍按 baseline 对齐，可能造成不对齐现象。比如两个高度不同的盒子：
.box1, .box2 { display: inline-block; vertical-align: top;}
加上 vertical-align: top 后，它们就会顶部对齐，避免因默认基线对齐导致的错位。
基本上就这些。掌握 vertical-align 的关键是搞清它只影响行内上下文中的对齐行为，不是用来做整体页面垂直居中的。用对了场景，能轻松解决很多细节排版问题。
以上就是CSS布局中vertical-align如何使用_行内元素对齐技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/952116.html
微信扫一扫 
支付宝扫一扫 
