Home思洋影视事业部网站建设知识库
0 Comments

CSS中实现DIV容器垂直居中方法揭秘(1)

发布于：2013-08-09  |   作者：广州网站建设  |   已聚集：人围观

本文向大家描述一下实现DIV容器垂直居中的方法，主要有单行垂直居中，多行未知高度文字的垂直居中，多行文本固定高度的居中等内容，相信本文介绍一定会让你有所收获。

DIV CSS教程：实现DIV容器垂直居中的方法

其实CSS水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在CSS页面布局过程中实现垂直居中的方法。
广州网站建设,网站建设,广州网页设计,广州网站设计

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

一、单行垂直居中

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

ExampleSourceCode 



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




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



	SourceCodetoRun




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




	[可先修改部分代码再运行查看效果]



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

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机