0 Comments

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

发布于:2013-07-17  |   作者:广州网站建设  |   已聚集:人围观
4、div层垂直居中

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

ExampleSourceCode


  1. <divstyledivstyle="width:275px;height:375px;border:solidred;"> 
  2. <divstyledivstyle="background:green;height:375px;width:275px;  
  3. position:relative;display:table-cell;vertical-align:middle;"> 
  4. <div 
  5. style="background:red;position:static;position:absolute\9;top:50%;"> 
  6. <div 
  7. style="background:blue;position:relative;top:-50%;"> 
  8. div> 
  9. div> 
  10. div> 
  11. div> 
  12.  

5、div层垂直水平居中,英文超长换行

ExampleSourceCode


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

6、div垂直滚动

ExampleSourceCode


  1. <div 
  2. style="width:160px;height:260px;  
  3. overflow-y:scroll;border:1pxsolid;"> 
  4. div> 
  5.  
飞机