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

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

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

四、在InternetExplorer中的解决方案

在InternetExplorer6及以下版本中，在高度的计算上存在着缺陷的。在InternetExplorer6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

ExampleSourceCode 



    
	
  1. 
		<DIVidDIVid="wrap"> 
    2. 
	
  2. 
		<DIVidDIVid="subwrap"> 
    3. 
	
  3. 
		<DIVidDIVid="content"> 
    4. 
	
  4. 
		</DIV> 
    5. 
	
  5. 
		</DIV> 
    6. 
	
  6. 
		</DIV> 
    7. 
	
  7. 
		 
    8. 




	如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现InternetExplorer6中的垂直居中：

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



	ExampleSourceCode 




    
	
  1. 
		DIV#wrap{  
    2. 
	
  2. 
		border:1pxsolid#FF0099;  
    3. 
	
  3. 
		background-color:#FFCCFF;  
    4. 
	
  4. 
		width:760px;  
    5. 
	
  5. 
		height:400px;  
    6. 
	
  6. 
		position:relative;  
    7. 
	
  7. 
		}  
    8. 
	
  8. 
		DIV#subwrap{  
    9. 
	
  9. 
		position:absolute;  
    10. 
	
  10. 
		border:1pxsolid#000;  
    11. 
	
  11. 
		top:50%;  
    12. 
	
  12. 
		}  
    13. 
	
  13. 
		DIV#content{  
    14. 
	
  14. 
		border:1pxsolid#000;  
    15. 
	
  15. 
		position:relative;  
    16. 
	
  16. 
		top:-50%;  
    17. 
	
  17. 
		}  
    18. 




	当然，这段代码只能在InternetExlporer6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释InternetExlporer6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）



	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#wrap{  
    10. 
	
  10. 
		  border:1pxsolid#FF0099;  
    11. 
	
  11. 
		  background-color:#FFCCFF;  
    12. 
	
  12. 
		  width:760px;  
    13. 
	
  13. 
		  height:400px;  
    14. 
	
  14. 
		  position:relative;  
    15. 
	
  15. 
		 }  
    16. 
	
  16. 
		 DIV#subwrap{  
    17. 
	
  17. 
		  position:absolute;  
    18. 
	
  18. 
		  top:50%;  
    19. 
	
  19. 
		 }  
    20. 
	
  20. 
		 DIV#content{  
    21. 
	
  21. 
		  position:relative;  
    22. 
	
  22. 
		  top:-50%;  
    23. 
	
  23. 
		 }  
    24. 
	
  24. 
		</style> 
    25. 
	
  25. 
		</head> 
    26. 
	
  26. 
		 
    27. 
	
  27. 
		<body> 
    28. 
	
  28. 
		<DIVidDIVid="wrap"> 
    29. 
	
  29. 
		 <DIVidDIVid="subwrap"> 
    30. 
	
  30. 
		  <DIVidDIVid="content"><pre>现在我们要使这段文字垂直居中显示！  
    31. 
	
  31. 
		 DIV#wrap{  
    32. 
	
  32. 
		  border:1pxsolid#FF0099;  
    33. 
	
  33. 
		  background-color:#FFCCFF;  
    34. 
	
  34. 
		  width:760px;  
    35. 
	
  35. 
		  height:500px;  
    36. 
	
  36. 
		  position:relative;  
    37. 
	
  37. 
		 }  
    38. 
	
  38. 
		 DIV#subwrap{  
    39. 
	
  39. 
		  position:absolute;  
    40. 
	
  40. 
		  border:1pxsolid#000;  
    41. 
	
  41. 
		  top:50%;  
    42. 
	
  42. 
		 }  
    43. 
	
  43. 
		 DIV#content{  
    44. 
	
  44. 
		  border:1pxsolid#000;  
    45. 
	
  45. 
		  position:relative;  
    46. 
	
  46. 
		  top:-50%;  
    47. 
	
  47. 
		 }</pre> 
    48. 
	
  48. 
		  </DIV> 
    49. 
	
  49. 
		 </DIV> 
    50. 
	
  50. 
		</DIV> 
    51. 
	
  51. 
		</body> 
    52. 
	
  52. 
		</html> 
    53. 
	
  53. 
		 
    54. 




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

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


			

			

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

		
		
			  
	  
 
	

	 
	

	





	
	



飞机