首页 > 代码库 > 备忘:CSS图片垂直居中全兼容淫技整理集合
备忘:CSS图片垂直居中全兼容淫技整理集合
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> | |
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。