垂直对齐在 Firefox 和 IE7 等最新浏览器中,已经不是什么难事,但是IE6下使用 DIV 布局,垂直对齐则依然是个非常令人头痛的问题;虽然 IE 7 已经越来越普及,但是 IE6 依然占了很大的份额,所以,还是让我们一起看看解决方法吧!
CSS 实现文字、图片垂直对齐(vertical-align)专题文章 – 示例
<style type="text/css"> /* 说明:IE 6 下 DIV 垂直居中对齐 来源:CssPlay [ http://www.cssplay.co.uk ] 整理:CodeBit.cn [ http://www.codebit.cn ] */ .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="http://www.codebit.cn"><img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="CodeBit.cn - 聚合小段精华代码" /></a></span><!-- // fixVerticalCenterInner --> </div><!-- // fixVerticalCenterOuter -->