div span img對齊，垂直居中對齊問題

我想大家在前端開發中或多或少都遇到過這種問題，文字和圖片不能平齊，非常頭疼。

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相同！

原文出處：https://www.cnblogs.com/xuxiaoyu/p/11255099.html