CSS使DIV内容垂直居中的方法

2014-07-07 19:18:02|?次阅读|上传:wustguangh【已有?条评论】发表评论

关键词:HTML/CSS, Web, 界面设计|来源:唯设编程网

使用DIV设计模仿Windows的弹出对话框,经常需要使DIV中的内容水平、垂直居中。DIV水平居中的方法很简单,直接使用如下代码即可:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div居中 在线演示 www.divcss5.com</title> 
<style> 
body{ text-align:center} 
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00} 
/* css注释:为了观察效果设置宽度 边框 高度等样式 */ 
</style> 
</head> 
<body> 
<div class="div"> 
DIVCSS5实例 
</div> 
</body> 
</html> 

谈到垂直居中,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊!但事实却不是这么简单,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。

下面介绍几种使DIV内容chuizhi垂直居中的方法:

一、单行内容垂直居中

如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度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> 单行文字实现垂直居中 </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>
发表评论0条 】
网友评论(共?条评论)..
CSS使DIV内容垂直居中的方法