vertical-align中的文字究竟在哪？
问题详情：
提供了一个HTML代码，并在其中设置了两个图片的vertical-align属性，但对文字定位效果感到疑惑。
问题解答：
理解vertical-align是如何作用的至关重要：
行高（line-height）和行盒（line boxes）：
没有内容的div没有高度，有内容则由内容撑起高度。行高撑起div高度是因为行盒包住了所有行内内容。行盒必须包含每一行的所有内容，包括文字的行高。
vertical-align的默认值是baseline：
Zyro AI Background Remover
Zyro推出的AI图片背景移除工具
55 查看详情 文字的baseline是字母“x”的下方。
图片的baseline取决于类型：
inline-block：margin-bottom的底部（没有则为盒子的底部）inline-block（有文本）：最后一行文本的“x”的下方
vertical-align的不同值：
top：行内元素顶部与行盒顶部对齐。middle：行内元素中心与基线加上x-height一半的线对齐。bottom：行内元素底部与行盒底部对齐。
案例分析：
图片1为top，图片2为bottom：
图片1顶部与行盒顶部对齐，导致其他元素向上移动（最高元素——图片2）文字仍然与基线对齐，只是基线在行盒内的位置改变了。
图片1为bottom，图片2为top：
图片2向上移动，顶部与行盒顶部对齐。文字位置改变，但仍与基线对齐。
因此，虽然包括行内元素的文字始终与基线对齐，但其他元素的vertical-align改变会影响行盒内的基线位置，从而导致文字位置的变化。
以上就是vertical-align 中的文字究竟对齐到哪里？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1164282.html
微信扫一扫 
支付宝扫一扫 
