我想你们在前端开发中或多或少都遇到过这种问题，文字和图片不能平齐，很是头疼。

HTML代码：

<div class="">小太阳<span>小太阳</span><img src="img/考拉.jpeg" style="width: 24px;height: 24px;" alt=""></div>

介绍一个css属性：vertical-align

默认值是baseline。

当我们给 span 和 img 都加上 vertical-align: middle ; 会怎样尼？

<div class="" style="">小太阳<span style="vertical-align:middle">小太阳</span><img src="img/考拉.jpeg" style="width: 24px;height: 24px;vertical-align:middle" alt=""></div>

发现第一个“小太阳”没对齐，当然是给 div 也加上vertical-align: middle;

 

其属性值及解析如下：

baseline：将支持valign特性的对象的内容与基线对齐

sub：垂直对齐文本的下标

super：垂直对齐文本的上标

top：将支持valign特性的对象的内容与对象顶端对齐

text-top：将支持valign特性的对象的文本与对象顶端对齐

middle：将支持valign特性的对象的内容与对象中部对齐

bottom：将支持valign特性的对象的文本与对象底端对齐

text-bottom：将支持valign特性的对象的文本与对象底端对齐

给div 设置 行高line-height属性

line-height值改得和DIV或者SPAN的height相同！

版权声明：本文为xuxiaoyu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xuxiaoyu/p/11255099.html