CSS 实现文字、图片垂直对齐(vertical-align)

        垂直对齐在 Firefox 和 IE7 等最新浏览器中，已经不是什么难事，但是IE6下使用 DIV 布局，垂直对齐则依然是个非常令人头痛的问题；虽然 IE 7 已经越来越普及，但是 IE6 依然占了很大的份额，所以，还是让我们一起看看解决方法吧！

 

 

<style type="text/css">
a img { border:0; }

/*
 说明：IE 6 下 DIV 垂直居中对齐
*/
.fixVerticalCenterOuter{
 width:300px;
 height:200px;
 border:1px solid #ccc;
 text-align:center;
 display:table-cell;
 vertical-align:middle;
}

/* for IE 6 */
* html .fixVerticalCenterAdd {
 width:0;
 height:100%;
 display:inline-block;
 vertical-align:middle;
}
* html .fixVerticalCenterInner{
 vertical-align:middle;
 display:inline-block;
}

</style>

<div class="fixVerticalCenterOuter">
 <span class="fixVerticalCenterAdd"></span><!-- // fixVerticalCenterAdd -->
 <span class="fixVerticalCenterInner"><a href="#"><img src="img/logo.gif" alt="#" /></a></span><!-- // fixVerticalCenterInner -->
</div><!-- // fixVerticalCenterOuter -->

<br /><br />

<div class="fixVerticalCenterOuter">
 <span class="fixVerticalCenterAdd"></span><!-- // fixVerticalCenterAdd -->
 <span class="fixVerticalCenterInner"><a href="#">精彩网络</a></span><!-- // fixVerticalCenterInner -->
</div><!-- // fixVerticalCenterOuter -->