水平排列的li不对齐问题

HTML代码以下：

<ul>
	<li>
	<img src="img/1.png" alt="">
	哈哈哈哈
	</li>
	<li>
	<img src="img/1.png" alt="">
	呃呃呃额额
	</li>
	<li>
	<img src="img/1.png" alt="">
	<!-- 蛤蛤蛤 -->
	</li>
</ul>

css代码以下：

ul li{
		display: inline-block;
	}
ul li img{
		display: block;
	}

 分析：

3个li设置了display: inline-block;这时候水平排列，可是三个盒子里面的内容状况不同，第一个和第二有图片和文字，第三个只有图片。这时候谷歌浏览器显示以下：

这是由于vertical-align属性致的，vertical-align默认设置为vertical-align：base-line

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。此时第三个li盒子底部与前2个盒子base-line对齐，也就出现了这个不对齐状况。这是比较特殊的情景。

消除方法：

1.给li设置：vertical-align:top;

浏览器显示以下：

这时候对齐了

2.也能够给li设置浮动：float：left

3.能够在第三个li盒子里底部加上文字，也能够达到对齐效果