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

实现图片在容器累垂直居中有多种方法，例如计算高度使用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="data:images/1.jpg" alt='图片'></a></div><div class="wrap"><a href="#" ><img src="data: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="data:images/1.jpg" /><span class="help_img" /></span></li><!--这里如果使用img标签会出现问题，src=""的存在会让chrome出现兼容性问题(出现灰色边框)，去img标签中的src=""时会导致在火狐无法垂直居中如果使用img标签仍需要在样式中加上display：inline-block；才能消除上述影响--><li> <img class="show_img" src="data:images/2.jpg" /> <span class="help_img" /></span></li></ul>
</body>
</html>

谷歌出现的bug如下图：

加上display-inline后bug解决

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

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

css未知尺寸的图片的水平和垂直居中
纯CSS实现未知尺寸的图片水平和垂直居中.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vert ...
html背景图适应div_体验css+div 之三种使网站背景图片自动适应浏览器大小的方法...
不管你怎么变化浏览器窗口大小,背景图始终会自动调节大小. 1 . 第一次方法: 我第一个想法是需要使用一个 css 背景图,如果这张图够大,就能填充整个屏幕.当浏览器窗口大小没有图片大时,它将自动隐藏 ...
css img 适配尺寸_img图片自适应布局_HTML5教程_郭隆邦技术博客
图片自适应布局源码下载使用百度图片搜索的时候,可以看到搜索页面,所有的图片基本都是定高度显示,图片的宽度随着高度等比例缩放.点击搜搜页面的每一张图片, 可以跳转到一个页面只有一张图片,显示的尺寸是 ...
CSS世界-第四章盒尺寸四大家族
盒尺寸的4个盒子:content box,padding box,border box,margin box 一深入理解 content 1.根据可替换性把元素分为替换元素和非替换元素 <im ...
html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
css修改图片尺寸后图片变模糊的问题
在富文本编辑器编辑文章发布到网站上时,因图片尺寸过大或导致页面混乱,并且需要兼容移动端.所以需要给图片限制max-width: 100%, 但是设置改属性后,若图片超过100%会导致图片模糊.关于这个 ...
div怎么在css中设置字体大小,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法？
解决这个问题有多种方法 1.使用css hack 处理ie6下的问题. 2.嵌入其它标签使其垂直居中. 方法一: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ ...
CSS魔法堂：重拾Border之——图片作边框
前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

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

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

最新文章

热门文章