我想你們在前端開發中或多或少都遇到過這種問題，文字和圖片不能平齊，很是頭疼。
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相同！