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

CSS水平居中和垂直居中多种解决方案(3)

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

7、垂直居中和使用text-align水平居中

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



    
	
  1. 
		<divstyledivstyle="float:left;width:275px;height:375px;border:solidred;"> 
    2. 
	
  2. 
		<div 
    3. 
	
  3. 
		style="height:375px;width:275px;position:relative;  
    4. 
	
  4. 
		display:table-cell;vertical-align:middle;"> 
    5. 
	
  5. 
		<div 
    6. 
	
  6. 
		style="position:static;position:absolute\9;top:50%;"> 
    7. 
	
  7. 
		<div 
    8. 
	
  8. 
		style="position:relative;top:-50%;text-align:center;"> 
    9. 
	
  9. 
		<divstyledivstyle="width:275px;"> 
    10. 
	
  10. 
		<divstyledivstyle="width:160px;WORD-WRAP:break-word;TABLE-LAYOUT:fixed;  
    11. 
	
  11. 
		word-break:break-all;text-align:left;"> 
    12. 
	
  12. 
		div> 
    13. 
	
  13. 
		div> 
    14. 
	
  14. 
		 
    15. 
	
  15. 
		div> 
    16. 
	
  16. 
		div> 
    17. 
	
  17. 
		div> 
    18. 
	
  18. 
		div> 
    19. 
	
  19. 
		 
    20. 




	8、垂直居中和使用margin水平居中



	ExampleSourceCode




    
	
  1. 
		<divstyledivstyle="float:left;width:275px;
    2. 
	
  2. 
		height:375px;border:solidred;"> 
    3. 
	
  3. 
		<div 
    4. 
	
  4. 
		style="height:375px;width:275px;position:relative;  
    5. 
	
  5. 
		display:table-cell;vertical-align:middle;"> 
    6. 
	
  6. 
		<div 
    7. 
	
  7. 
		style="position:static;position:absolute\9;top:50%;"> 
    8. 
	
  8. 
		<div 
    9. 
	
  9. 
		style="position:relative;top:-50%;"> 
    10. 
	
  10. 
		 
    11. 
	
  11. 
		<divstyledivstyle="margin:0auto;width:160px;WORD-WRAP:break-word;  
    12. 
	
  12. 
		TABLE-LAYOUT:fixed;word-break:break-all;"> 
    13. 
	
  13. 
		div> 
    14. 
	
  14. 
		div> 
    15. 
	
  15. 
		div> 
    16. 
	
  16. 
		div> 
    17. 
	
  17. 
		div> 
    18. 



			

			

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

		
		
			  
	  
 
	

	 
	

	





	
	



飞机