div容器垂直居中(三原色加精)

2008-6-22 20:20:46 来源：本站 评论：

div容器垂直居中(三原色加精)

一、单行垂直居中

二、多行未知高度文字的垂直居中

三、多行文本固定高度的居中

四、在Internet Explorer中的解决方案

五、完美的解决方案

正文开始

CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需 做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中 拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而 像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

一、单行垂直居中

 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：   

 

div {   
        height:25px;   
        line-height:25px;   
        overflow:hidden;   
 } 


这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>52CSS.com</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
 body { font-size:12px;font-family:tahoma;}
 div {
  height:25px;
  line-height:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
 }
  </style>
 </head>

 <body>
  <div>现在我们要使这段文字垂直居中显示！</div>
 </body>
</html>

不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中


[1] [2] [3] [4] [5] 
上一篇：!important在ie7.0的hack方法（三原色加精）
下一篇：在线视频播放代码（wmv，RM）全屏（三原色加精）
正在读取…
我也评两句

   

版权说明：详细说明　网站所属：2006- © Syscy.com 三原色创意科技　 京ICP备08101643号