line-height与vertical-align使用时发现的问题

垂直居中是网页布局中经常要用的技巧，尤其是会涉及到line-height属性。我在使用的过程中发现了这样一个问题。

<style>
	.a{width: 400px;height: 200px;background:red;text-align: center;line-height: 200px;}
	.b{width: 200px;height:100px;background: yellow;}
</style>

<div class="a">
	<div class="b">
		这是一个测试
	</div>
</div>

我本来想让黄色div与文字一起垂直居中于红色div，但是结果文字竟然出去了。。。。。。line-height属性只能用于行级元素垂直居中。

另外，使用line-height对元素对行内元素进行居中定位时，如果各个元素高度不一致，会出现这种情况。

<style>
	*{margin: 0;padding: 0;}
	p{height:100px;line-height:100px;background: red;}
	span{font-size: 30px;}
	a{font-size: 20px;}
</style>

<p><span>1111111</span><a>22222</a><img src="1.png" width="50px" height="50px"/></p>

解决办法是在代码中加入vertical-align属性

*{margin: 0;padding: 0;}
p{height:100px;line-height:100px;background: red;}
span{font-size: 30px;}
a{font-size: 20px;}
span,a,img{vertical-align: middle;}

另外引用http://blog.csdn.net/wolinxuebin/article/details/7615098这位大神的几种垂直居中的方法。让我们在做垂直居中时能更得心应手。