首页 > 代码库 > 备忘：CSS图片垂直居中全兼容淫技整理集合

备忘：CSS图片垂直居中全兼容淫技整理集合

2024-07-02 06:14:11   228人阅读

1. ie的文档流样式 writing-mode:tb-rl

.box1 a{
    writing-mode:tb-rl;  /* 触发layout 后面高度生效，文档流 自上往下，自右往左，宽度要自适应，文字方向在垂直方向居中 */
    height:100%;
    vertical-align:middle
}

2. inline-block方式

.box2 i{
    zoom:1; height:100%; width:0; /* 触发layout，撑起行内的高度，宽度为0，不占横向空间  */
    background:#c00;
    vertical-align:middle;
}

3. 利用字体大小

.box3{
    *display: block;
    *font-size: 87px;/约为高度的0.873，200*0.873 约为87/
    *font-family:Arial;/防止gbk等编码引起的hack失效问题/
}

4. 绝对定位

示例

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>页面元素垂直居中的几种方法</title>
   
  <link href="http://zzsvn.pcauto.com.cn/svn/%d6%c6%d7%f7%b2%bf%b9%e6%b7%b6/web%b1%ea%d7%bc/styles/reset.css" rel="stylesheet" />
   
   
  <style>
  .box{ width:100px; height:100px; line-height:22px; border:1px solid #c00;}
   
   
  .box1{ display:table-cell; vertical-align:middle; text-align:center;}
  .box1 a{
  writing-mode:tb-rl; /* 触发layout 后面高度生效，文档流 自上往下，自右往左，宽度要自适应，文字方向在垂直方向居中 */
  height:100%;
  vertical-align:middle
  }
   
   
  .box2{ display:table-cell; vertical-align:middle; text-align:center;}
  .box2 i{
  zoom:1; height:100%; width:0; /* 触发layout，撑起行内的高度，宽度为0，不占横向空间 */
  background:#c00;
  vertical-align:middle;
  }
  .box2 img{ vertical-align:middle}
   
   
  .box3{ display:table-cell; vertical-align:middle; text-align:center;}
  .box3{
  *display: block;
  *font-size: 87px;/*约为高度的0.873，200*0.873 约为87*/
  *font-family:Arial;/*防止gbk等编码引起的hack失效问题*/
  }
   
  .box4{ display:table-cell; vertical-align:middle; text-align:center;}
   
  </style>
  <!--[if lte IE 7]>
  <style>
  .box4{ position:relative; }
  .box4 a{ position:absolute; display:block; left:50%; top:50%;}
  .box4 img{position:relative;left:-50%;top:-50%;}
  </style>
  <![endif]-->
  </head>
   
  <body>
   
  <br />
  方法一
  <div class="box box1">
  <a href="#"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a>
  </div>
   
  <br />
  方法二
  <div class="box box2">
  <i></i>
  <a href="../group/176189.html"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a>
  </div>
   
  <br />
   
  方法三
  <div class="box box3">
  <a href="../group/176189.html"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a>
  </div>
   
  <br />
  方法四
  <div class="box box4">
  <a href="../group/176189.html"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a>
  </div>
   
   
   
   
   
  </body>
  </html>
   


联系
我们