您的位置：首页 > Web前端 > CSS

html+css使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法

2016-11-24 19:15 816 查看

实现图片在容器累垂直居中有多种方法，例如计算高度使用margin，透明gif图片+背景定位等等，其中很多方法比较繁琐兼容性也不好，例如用position方法。下面为大家介绍两种比较简洁的方法，一种是利用display：table-cell实现图片垂直居中，另一种是使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法；第二种方法是我为了解决前一种方法存在的兼容性为题而想出来的，这是在查了一些资料后，受到张鑫旭的博客的启发想到的。

一、先介绍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>

display：table-cell用来处理图片非常方便，但是存在ie兼容性问题，因为IE6,IE7根本就不识别display:table-cell！所有我们就不能不去寻找更为方便兼容性更好的方法，下面就为大家介绍这么一种方法。

二、使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法

先简单的说一说原理：将要显示的图片与一个高度为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解决

经测试第二种方法在各大浏览器中均能实现很好的效果，消耗小，方便快捷，在这里推荐给大家。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css

相关文章推荐

新的分享

章节导航