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

垂直对齐在 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 -->

《CSS 实现文字、图片垂直对齐(vertical-align)专题文章》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>