html+css使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法
一、先介绍display：table-cell的方法：
话不多说上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table-cell 图片居中</title>
<style type="text/css">
.wrap{
float: left;
}
a{display:table-cell;
vertical-align:middle;
width:128px; height:150px;
border:1px solid #beceeb;
text-align: center;}
img{
max-width:128px;max-height:150px;
}
</style>
</head>
<body>
<div class="wrap">
<a href="#" ><img src="images/1.jpg" alt='图片'></a>
</div>
<div class="wrap">
<a href="#" ><img src="images/2.jpg" alt='图片'></a>
</div>
</body>
</html>
二、使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法
先简单的说一说原理：将要显示的图片与一个高度为100%，宽度1px的空元素进行vertical-align:middle对齐；
张鑫旭介绍的是一种与透明的gif图片进行vertical-align:middle对齐的方法，但是用img标签时chrome会出现bug，受到启发我尝试使用空标签，经过多次测试，最后发现使用空白标签
也能实现居中效果，且更为简单，不限于img标签。
这里添加的空标签可以为 span 、 a等标签，但需要在样式中转为行内块元素才能起效，用img标签有一些注意事项我已经写在注释里了；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用空白标签实现图片在容器里垂直居中</title>
<style type="text/css">
li{
height:128px; width:150px;
padding:13px 0;
float:left;
margin-right:10px;
border:1px solid #beceeb;
text-align:center;
font-size:0;
}
li .help_img{
height:100%;
width:1px;
display: inline-block; /*标签需转换为行内块元素*/
vertical-align:middle;
}
li .show_img{
vertical-align:middle;
}
</style>
</head>
<body>
<ul class="zxx_align_box_6 fix">
<li>
<img class="show_img" src="images/1.jpg" />
<span class="help_img" /></span>
</li>
<!--这里如果使用img标签会出现问题，src=""的存在会让chrome出现兼容性问题(出现灰色边框)，去img标签中的src=""时会导致在火狐无法垂直居中
如果使用img标签仍需要在样式中加上display：inline-block；才能消除上述影响-->
<li> <img class="show_img" src="images/2.jpg" />
<span class="help_img" /></span>
</li>
</ul>
</body>
</html>
谷歌出现的bug如下图：
加上display-inline后bug解决
经测试第二种方法在各大浏览器中均能实现很好的效果，消耗小，方便快捷，在这里推荐给大家。
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。