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

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

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

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

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

ExampleSourceCode



    
	
  1. 
		DIV{  
    2. 
	
  2. 
		padding:25px;  
    3. 
	
  3. 
		}  
    4. 




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

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



	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. 
		  padding:25px;  
    11. 
	
  11. 
		  border:1pxsolid#FF0099;  
    12. 
	
  12. 
		  background-color:#FFCCFF;  
    13. 
	
  13. 
		  width:760px;  
    14. 
	
  14. 
		 }  
    15. 
	
  15. 
		</style> 
    16. 
	
  16. 
		</head> 
    17. 
	
  17. 
		 
    18. 
	
  18. 
		<body> 
    19. 
	
  19. 
		<DIV><pre>现在我们要使这段文字垂直居中显示！  
    20. 
	
  20. 
		 DIV{  
    21. 
	
  21. 
		  padding:25px;  
    22. 
	
  22. 
		  border:1pxsolid#FF0099;  
    23. 
	
  23. 
		  background-color:#FFCCFF;  
    24. 
	
  24. 
		 }  
    25. 
	
  25. 
		</pre></DIV> 
    26. 
	
  26. 
		</body> 
    27. 
	
  27. 
		</html> 
    28. 
	
  28. 
		 
    29. 




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

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


			

			

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

		
		
			  
	  
 
	

	 
	

	





	
	



飞机