备忘：CSS图片垂直居中全兼容淫技整理集合
2020-12-07 08:31
YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
标签：com http style class div img c t size sp tar
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. 绝对定位
示例
| xmlns="http://www.w3.org/1999/xhtml"> | |
| http-equiv="Content-Type" content="text/html; charset=gb2312" /> | |
|
|
|
| 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" /> | |
| .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;} | |
| 方法一 | |
class="box
box1"> |
|
href="#"> src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg">
|
|
| 方法二 | |
class="box
box2"> |
|
|
href="../group/176189.html">src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg">
|
|
| 方法三 | |
class="box
box3"> |
|
|
href="../group/176189.html">src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg">
|
|
| 方法四 | |
class="box
box4"> |
|
|
href="../group/176189.html">src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg">
|
|
备忘：CSS图片垂直居中全兼容淫技整理集合,搜素材,soscw.com
备忘：CSS图片垂直居中全兼容淫技整理集合
标签：com http style class div img c t size sp tar
原文地址：http://www.cnblogs.com/aim-at-is-the-tao-in/p/3701726.html
文章标题：备忘：CSS图片垂直居中全兼容淫技整理集合
文章链接：http://soscw.com/index.php/essay/23459.html