div里面css控制图片垂直居中的解决办法

内容摘要
一篇《div里面css控制图片垂直居中的解决办法》文章，下午又找到一篇更全更好的,贴上来
文章正文

当writing-mode为tb-rl 时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。

IE6下用writing-mode实现
未知高度替换元素垂直居中。

HTML/XML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>利用定位来显示垂直局中的图片</title>  
  5. <style type="text/css">  
  6. .miao {   
  7.   width:500px;   
  8.   height:220px;   
  9.   line-height:220px;   
  10.   border: 1px solid;   
  11.   text-align: center;   
  12. }   
  13. .miao img {   
  14.   vertical-align: middle;   
  15. }   
  16. </style>  
  17. <!--[if IE 6]>  
  18. <style type="text/css">  
  19.   .miao span {   
  20.     border: 1px solid red;   
  21.     height: 100%; /* 要保证和父元素高度一样才行 */   
  22.     writing-mode: tb-rl;   
  23.     vertical-align: middle;   
  24.   }   
  25. </style>  
  26. <![endif]-->  
  27. </head>  
  28. <body>  
  29. <h1>固定高宽的容器中，图片垂直局中。</h1>  
  30. <p>使用的绝对定位和相对定位的方法</p>  
  31. <div class="miao">  
  32.     <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了   
  33. </div>  
  34. <hr />  
  35. <div class="miao">  
  36.     <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了   
  37. </div>  
  38. <hr />  
  39. <div class="miao">  
  40.     <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>你知道的太多了   
  41. </div>  
  42. </body>  
  43. </html>  

 

因为Opera，FF3，IE8均支持display:talbe;这些特性了，因此改进的办法是：

HTML/XML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>利用定位来显示垂直局中的图片</title>  
  6. <style type="text/css">  
  7. .miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}   
  8. .miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}   
  9. .miao span img{border:dashed 1px green;}   
  10. </style>  
  11. <!--[if lte IE 7]>  
  12. <style type="text/css">  
  13. .miao{position:relative;overflow:hidden;}   
  14. .miao span{position:absolute;left:50%;top:50%;}   
  15. .miao span img{position:relative;left:-50%;top:-50%;}   
  16. </style>  
  17. <![endif]-->  
  18. </head>  
  19. <body>  
  20. <h1>固定高宽的容器中，图片垂直局中。</h1>  
  21. <p>绿色容器是span，目的是使自己的左上角与容器中心点对齐。红色是具体图片，再次设置负值使自己的中心点和父容器的中心点重合，最终达到垂直局中的目的。</p>  
  22. <div class="miao">  
  23.     <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>  
  24. </div>  
  25. <hr />  
  26. <div class="miao" style="width:300px;height:80px;">  
  27.     <span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>  
  28. </div>  
  29. <hr />  
  30. <div class="miao" style="width:500px;height:220px;">  
  31.     <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>  
  32. </div>  
  33. </body>  
  34. </html>  

 

如果不喜欢条件注释，可自行将代码以css hack的方式拼凑起来。

未知高宽的图片垂直局中

HTML/XML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <style type="text/css">  
  3. <!--    
  4. * {margin:0;padding:0}   
  5. div {   
  6.     width:500px;   
  7.     height:500px;   
  8.     border:1px solid #ccc;   
  9.     overflow:hidden;   
  10.     position:relative;   
  11.     display:table-cell;   
  12.     text-align:center;   
  13.     vertical-align:middle   
  14.     }   
  15. div p {   
  16.     position:static;   
  17.     +position:absolute;   
  18.     top:50%   
  19.     }   
  20. img {   
  21.     position:static;   
  22.     +position:relative;   
  23.     top:-50%;left:-50%;   
  24.     width:276px;   
  25.     height:110px   
  26.     }   
  27. -->  
  28. </style>  
  29. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  

 

标准浏览器下另类方法:

HTML/XML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <style type="text/css">  
  3. <!--    
  4. body {   
  5.     margin:0;padding:0   
  6.     }   
  7. div {   
  8.     width:500px;   
  9.     height:500px;   
  10.     line-height:500px;   
  11.     border:1px solid #ccc;   
  12.     overflow:hidden;   
  13.     position:relative;   
  14.     text-align:center;   
  15.     margin:auto   
  16.     }   
  17. div p {   
  18.     position:static;   
  19.     +position:absolute;   
  20.     top:50%   
  21.     }   
  22. img {   
  23.     position:static;   
  24.     +position:relative;   
  25.     top:-50%;left:-50%;   
  26.     width:276px;   
  27.     height:110px;   
  28.     vertical-align:middle   
  29.     }   
  30. p:after {   
  31.     content:".";font-size:1px;   
  32.     visibility:hidden   
  33.     }   
  34. -->  
  35. </style>  
  36. <div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>  

 

标准浏览器严格型申明下：

HTML/XML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <style type="text/css">  
  3. <!--    
  4. * {margin:0;padding:0}   
  5. div {   
  6.     width:500px;   
  7.     height:500px;   
  8.     line-height:500px;   
  9.     border:1px solid #ccc;   
  10.     overflow:hidden;   
  11.     position:relative;   
  12.     text-align:center;   
  13.     }   
  14. div p {   
  15.     position:static;   
  16.     +position:absolute;   
  17.     top:50%;   
  18.     vertical-align:middle   
  19.     }   
  20. img {   
  21.     position:static;   
  22.     +position:relative;   
  23.     top:-50%;left:-50%;   
  24.     width:276px;   
  25.     height:110px;   
  26.     vertical-align:middle   
  27.     }   
  28. -->  
  29. </style>  
  30. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  

 

利用字体大小的方法：

HTML/XML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <style type="text/css">  
  3. * {margin:0;padding:0;}   
  4. div {   
  5.     width:500px;text-align:center;border:1px solid #f00;line-height:500px;   
  6.     height:500px;font-size:500px   
  7.     }   
  8. *>div{   
  9.     font-size:12px   
  10.     }   
  11. div img {   
  12.     vertical-align:middle   
  13.     }   
  14. </style>  
  15. <div>  
  16. <img src="http://www.google.com/intl/en/images/logo.gif" />  
  17. </div>  

 

display:inline-block 方法:

HTML/XML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <style type="text/css">  
  3. div {   
  4.     display:table-cell;   
  5.     height:300px;   
  6.     width:500px;   
  7.     text-align:center;   
  8.     border:1px solid #000;   
  9.     vertical-align:middle   
  10.     }   
  11. </style>  
  12. <!--[if IE]>  
  13. <style type="text/css">  
  14. i {   
  15.     display:inline-block;   
  16.     height:100%;   
  17.     vertical-align:middle   
  18.     }   
  19. img {   
  20.     vertical-align:middle   
  21.     }   
  22. </style>  
  23. <![endif]-->  
  24. <div>  
  25. <i></i>  
  26.     <img src="http://www.baidu.com/img/logo.gif" alt=""/>  
  27. </div>  

 

最简单当然是背景图片的方法了:

HTML/XML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <style type="text/css">  
  3. * {margin:0;padding:0;}   
  4. div {   
  5.     width:500px;border:1px solid #f00;   
  6.     height:500px;   
  7.     background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat   
  8.     }   
  9. </style>  
  10. <div>  
  11. </div>
代码注释
[!--zhushi--]
上一篇HTML5 vs Mobile App谁将是主流下一篇div里面css控制图片垂直居中的解决办法

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！