测试用代码
<!DOCTYPE html><html><head> <style> #dd { //line-height: 300px; background-color: gray; position: relative; font-size: 60px; //height: 300px; } #dd > .middle { position: absolute; top: 50%; height: 1px; background-color: black; left: 0; right: 0px; } #dd span { background-color: green; } </style> </head><body> <div id="dd"> <img style="max-width:90%" alt="vertical-align各属性对比_html/css_WEB-ITnose" ><span>xg</span> <div class="middle"></div> </div></body></html>
默认的是按baseline对齐
去掉图片试试：
立即学习“前端免费学习笔记（深入）”；
这里xg span的高度是60,68的高度是line-height,上图高72是图片把div撑开了，可以看出span的底部到baseline的距离是8
给img添加 vertical-align:bottom; 后：
立即学习“前端免费学习笔记（深入）”；
图片和div的底边对齐
vertical-align:text-bottom
立即学习“前端免费学习笔记（深入）”；
和对齐
vertical-align:sub;
立即学习“前端免费学习笔记（深入）”；
和vertical-align:bottom;类似，但是更低一些
vertical-align:middle;
立即学习“前端免费学习笔记（深入）”；
图片偏下了
将img的height改成1试一试
立即学习“前端免费学习笔记（深入）”；
原来是跟x居中对齐了
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
885
收藏
