css打造图片垂直居中自动排列效果css打造图片垂直居中自动排列效果 css打造图片垂直居中自动排列效果 div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说，更是让大家头疼。尤其是在图片大小不固定的情况下，更是麻烦。记得刚工作的时候就碰到这样的问题，费了九牛二虎之力才垂直剧中了结果，文字显示不了链接…… 下面来看一个典型实用的CSS布局实例，CSS实现图片的水平居中、垂直居中，在Div区块内，图片是未知宽高。不论使用何种尺寸的图片，它都会居中于DIV中，虽然代码有点多，但是兼容性方面做的挺好。 ...
可以实现图文混排效果。其运行效果如下:
对图片垂直剧中的方法进行了一下总结:
1、 使line-height值和box的height值相同
结构如下(下面第6点的结构也一样，除了box的扩展类名: 不同)
样式:
这种方式的优点是:同时支持块级和内联极元素;支持图片和图片以及图文混排。 缺点是:只能显示一行。
说明:这里使用writing-mode兼容ie6，参考了blueidea的那篇文章，以前算是孤陋寡闻吧，看来对ie使用“以毒攻毒”的办法还是挺有效的嘛。同时在结构上也做了调整，传统的
方式(即box里面嵌套一个span，然后把img放里面对span使用与i类似的样式)如果是把两张图放在span里面，则IE6下两张图会上下排列(writing-mode的缘故)，所以小弟在此做了一点点改进。
2、 使用定位方法
结构如下(下面4、5点的结构也一样，除了box的扩展类名不同):
优点:所有浏览器都支持;支持图片和图片以及图文混排。
缺点:垂直方向的居中不完美，需要根据box的高度作调整;需额外嵌套一层标签。 说明:这个应该不算什么新方法了吧，以前做垂直居中都用这法子。定位确实是一种很不错的布局方式，如果不考虑IE6，float早可以回家休息了(貌似也不远了，请参考拜拜了,浮动布局-基于display:inline-block的列表布局，此文将让您有足够的理由放弃float)。
3、 对box使用padding-bottom=padding-top方法
结构和第1点类似，，除了box的扩展类名不同，少了ie注释。
样式如下:
.padding{padding-top:3em;padding-bottom:3em;}/* 当然也可以用绝对值 */优点:支持图片和图片以及图文混排;支持所有浏览器。
缺点:box的高度不能固定。
说明:如果box的高不固定，这算是最简单的一种方法了吧，简单到用起来的时候心里头都慌慌的(就像大中
小学
小学生如何制作手抄报课件柳垭小学关于三违自查自纠报告小学英语获奖优质说课课件小学足球课教案全集小学语文新课程标准测试题
生对待1加1等于几那个问题一样^_^)。可是经过测试，在所有主流浏览器下都有效，读者可以试着换张灰常大的图试试(我没测试哈)。
4、 使用font-size方法
结构同上，样式如下:
.font-size{height:100px;}
.font-size .inner{font-size:50px;*font-size:65px;_font-size:80px;} .font-size .inner a{font-size:14px;vertical-align:middle;}
优点:支持图片和图片以及图文混排。文本需重定义font-size。
缺点:font-size值强烈依赖box的height值;一个font-size值不能兼容所有浏览器，ie6、7下需做另外调整;目前Opera(10.6)不支持这种方法;需额外嵌套一层标签。 说明:这应该是几种方法中最蛋疼的一种了吧，兼容性也最差，在实际操作中尽量避免吧。
5、 使用display:table-cell方法
结构同上，样式如下:
.table-cell{height:100px;display:table;}
.table-cell .inner{display:table-cell;vertical-align :middle;}优点:完全按照table式布局。但要注意合法的table-cell元素应该作为table元素的子元素出现;支持图片和图片以及图文混排。
缺点:IE6/7不支持(要用hack，可以与定位法杂交);需额外嵌套一层标签。 说明:这种方法也不是什么新法子，模拟表格做布局，你懂的。
6、使用inline-block方法
结构同1，样式如下:
.inline-block{height:100px;}
.inline-block:after{content:".";visibility:hidden;display:inline-block;height:100%;vertical-align:middle;}
.inline-block i{display:inline-block;height:100%;vertical-align:middle;}/* ie6/7下可以使用此方法兼容 */
.inline-block img{vertical-align: middle;}
优点:如果不用:after伪元素而是添加一个额外的标签(如i)，可兼容所有浏览器;支持图片和图片以及图文混排。
缺点:IE6/7不支持:after伪元素，这时需要用hack(或像本文一样额外添加了一个无语义的i)。
原文链接:p.net/news/?157.html
浙公网安备 33021202002483