两大方法实现DIV垂直居中

开发 前端
本文向大家介绍一下DIV垂直居中的几种方法,主要包括单行DIV垂直居中和多行未知高度文字的DIV垂直居中两大部分内容,希望本文介绍对你有所帮助。

在说到DIV垂直居中这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?本文和大家分享一下DIV水平居中的几种方法。

Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<DIV>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。

DIV垂直居中的几种方法

一、单行DIV垂直居中

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

如:

  1. DIV{  
  2. height:25px;  
  3. line-height:25px;  
  4. overflow:hidden;  

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

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <title>单行文字实现垂直居中</title> 
  7. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  8. <styletypestyletype="text/css"> 
  9. body{font-size:12px;font-family:tahoma;}  
  10. DIV{  
  11. height:25px;  
  12. line-height:25px;  
  13. border:1pxsolid#FF0099;  
  14. background-color:#FFCCFF;  
  15. }  
  16. </style> 
  17. </head> 
  18. <body> 
  19. <DIV>现在我们要使这段文字垂直居中显示!</DIV> 
  20. </body> 
  21. </html> 
  22.  

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

如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<DIV>完全填充的一种访求而已。可以使用类似下面的代码:

  1. DIV{  
  2. padding:25px;  

这种DIV垂直居中方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <title>多行文字实现垂直居中</title> 
  7. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  8. <styletypestyletype="text/css"> 
  9. body{font-size:12px;font-family:tahoma;}  
  10. DIV{  
  11. padding:25px;  
  12. border:1pxsolid#FF0099;  
  13. background-color:#FFCCFF;  
  14. width:760px;  
  15. }  
  16. </style> 
  17. </head> 
  18. <body> 
  19. <DIV><pre>现在我们要使这段文字垂直居中显示!  
  20. DIV{  
  21. padding:25px;  
  22. border:1pxsolid#FF0099;  
  23. background-color:#FFCCFF;  
  24. }  
  25. </pre></DIV> 
  26.  
  27. </body> 
  28. </html> 

【编辑推荐】

  1. DIV居中布局的三大实现方法
  2. DIV+CSS教程入门指导
  3. 深入学习DIV+CSS之绝对定位和相对定位用法
  4. Div+CSS布局入门之写入整体层结构与CSS
  5. DIV+CSS开发过程中影响SEO的制作细节

 

责任编辑:佚名 来源: cnzz.cn
相关推荐

2010-09-02 13:03:38

CSS垂直居中

2010-08-26 11:27:35

CSS居中

2009-08-21 10:17:14

C#异步网络编程

2010-10-09 11:25:12

JS打印

2010-08-24 14:23:39

DIV居中

2010-09-15 12:32:23

DIV页面

2010-09-10 13:58:38

DIV图片居中

2010-08-16 16:39:48

DIV内容居中

2010-05-27 11:12:10

SVN目录结构

2009-09-01 14:18:09

C#打开Excel文档

2010-08-10 10:23:30

Flex浏览器标题

2010-08-16 15:46:16

DIV居中

2010-08-31 14:49:57

CSS居中

2010-08-27 10:30:16

CSS垂直居中

2010-08-30 10:03:13

2010-05-17 14:36:11

2010-09-14 17:27:12

DIV CSS定位

2012-06-20 13:46:23

CSS

2010-09-09 10:23:23

DIVCSS垂直居中

2010-09-10 09:31:08

CSSDIV
点赞
收藏

51CTO技术栈公众号