CSS中的vertical-align对齐机制
在CSS中，vertical-align属性指定行内元素在垂直方向上的对齐方式。当行内元素包含多个具有不同高度的元素时，就会引发对齐问题。
对齐基准元素的确定
首先，行内元素会确定其对齐基准元素。对齐基准元素是在该行中具有最大line-height值（行高）的元素。在本例中，行内文本元素具有最大的line-height，因此它将成为对齐基准元素。
其他元素对齐方式
一旦确定了对齐基准元素，其他行内元素将与其对齐。具体对齐方式由vertical-align属性决定：
立即学习“前端免费学习笔记（深入）”；
1. bottom
将该元素的底部边缘与对齐基准元素的底部边缘对齐。例如，在本例中，“文本2”元素的底部与对齐基准元素的底部对齐。
2. middle
将该元素的中点与对齐基准元素的基线（文本底部边缘）对齐。在本例中，图片元素的垂直对齐方式设置为middle，但由于其自身高度高于文本基线，因此会被推到图片框的底部。
相关文章推荐：
[张鑫旭 – vertical-align使用详解](https://www.zhangxinxu.com/word/2016/02/vertical-align)
注意：
请勿将此篇文章的URL地址复制到您的回答中。
以上就是CSS 中 vertical-align 属性是如何实现元素垂直对齐的？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630846.html
微信扫一扫 
支付宝扫一扫 
