首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS小技巧

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

作者: CodeBit.cn     来源: CodeBit.cn     时间: 2008-08-05 12:52:17
摘要: 垂直对齐在 Firefox 和 IE7 等最新浏览器中，已经不是什么难事，但是IE6下使用 DIV 布局，垂直对齐则依然是个非常令人头痛的问题；虽然 IE 7 已经越来越普及，但是 IE6 依然占了很大的份额，所以，还是让我们一起看看解决方法吧！
归类: (X)HTML/CSS,

关键词: vertical-align, css, 文字, 图片, 垂直对齐, center, 对齐, middle,


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


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


CSS:
  1.  
  2. <style type="text/css"> 
  3.  
  4. /* 
  5.     说明：IE 6 下 DIV 垂直居中对齐 
  6.     来源：CssPlay [ http://www.cssplay.co.uk ] 
  7.     整理：CodeBit.cn [ http://www.codebit.cn ] 
  8. */ 
  9. .fixVerticalCenterOuter{ 
  10.     width:300px; 
  11.     height:200px; 
  12.     border:1px solid #ccc; 
  13.     text-align:center; 
  14.     display:table-cell; 
  15.     vertical-align:middle; 
  16. } 
  17.  
  18. /* for IE 6 */ 
  19. * html .fixVerticalCenterAdd { 
  20.     width:0; 
  21.     height:100%; 
  22.     display:inline-block; 
  23.     vertical-align:middle; 
  24. } 
  25. * html .fixVerticalCenterInner{ 
  26.     vertical-align:middle; 
  27.     display:inline-block; 
  28. } 
  29.  
  30. </style> 
  31.  


HTML:
  1.  
  2. <div class="fixVerticalCenterOuter"> 
  3.     <span class="fixVerticalCenterAdd"></span><!-- // fixVerticalCenterAdd --> 
  4.     <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 --> 
  5. </div><!-- // fixVerticalCenterOuter --> 
  6.  



相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)