应用CSS使图片与文字垂直居中 (IE6.0+, FF2+,Opera,Safari)

先来看看我们的HTML标签

1. <div class="container">
2.   <img src="mail.gif" /> your_mail_link@gmail.com
3. </div>

通常使文字居中不难,只要容器使用text-align: center便可以了.

1. .container {
2.   width: 400px;
3.   text-align: center
4. }

效果:

 

但你可能会发现图片与文字并没有垂直对齐,于是在容器中使用vertical-align: middle,但发现没有效果.

正确的做法应该把vertical-align: middle应用到图片中,使图片与文本流能垂直对齐整

1. .container img {
2.   vertical-align: middle
3. }

效果:

 

总结: 很多人把text-align与vertical-align搞混了,其实text-align是表示容器内文本流的对齐方式,vertical-align是表示自身对象与其他对象的对齐方式,因此在使用时要多加注意.