vertical-align垂直对齐

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_34644270/article/details/102748960

• 有宽度的块级元素居中对齐是margin:0 auto;
• 文字对齐是text-align:center;

vertical-align垂直对齐,只针对行内元素或者行内块元素.
通过vertical-align 控制图片和文字的垂直关系,默认的图片会和文字基线对齐.

vertical-align:baseline 基线|| top 顶部||middle垂直居中||bottom底部

应用场景,图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。

• 解决方法:给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
• 给img 添加 display：block; 转换为块级元素就不会存在问题了。