《css打造图片垂直居中自动排列效果.doc》由会员分享，可在线阅读，更多相关《css打造图片垂直居中自动排列效果.doc（5页珍藏版）》请在金锄头文库上搜索。
1、css打造图片垂直居中自动排列效果div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说，更是让大家头疼。尤其是在图片大小不固定的情况下，更是麻烦。记得刚工作的时候就碰到这样的问题，费了九牛二虎之力才垂直剧中了结果，文字显示不了链接下面来看一个典型实用的CSS布局实例，CSS实现图片的水平居中、垂直居中，在Div区块内，图片是未知宽高。不论使用何种尺寸的图片，它都会居中于DIV中，虽然代码有点多，但是兼容性方面做的挺好。 a href=LiangZhao_View.aspx?img_id= style=text-decoration:none;border:1px
2、 solid #DFDFDF; height:90px; overflow:hidden; text-align:center; display:table; position:relative; vertical-align:middle; width:120px;padding:10px; margin:10px 20px; float:left; background-color:White; target=_blankimg src=s/stuImages style=border:1px solid #DFDFDF; vertical-align:middle; 这里使用了posit
3、ion属性relative使其相对定位模式，在应用float:left使其自动排列对齐，最终效果如下图所示：这种方法不适合图片加标题模式，下面来介绍一种用li来实现图片加标题自动排列效果！ a href=ShootingImg_View.aspx?id= target=_blank img class=show_img src= / 对li的样式设置如下：.zxx_align_box_6 liheight:110px; width:150px; padding:13px 12px; float:left; margin:10px 8px; margin-right:5px; border:1p
4、x solid #beceeb; text-align:center; font-size:10px; background-color:White;.zxx_align_box_6 li .alpha_imgheight:100%; width:1px; vertical-align:middle;.zxx_align_box_6 li .show_imgvertical-align:middle;这里是利用了空白图片实现了大小不固定图片的垂直居中！关键代码：可以实现图文混排效果。其运行效果如下：对图片垂直剧中的方法进行了一下总结：1、 使line-height值和box的height值相同
5、结构如下（下面第6点的结构也一样，除了box的扩展类名不同）： 蓝色理想 蓝色理想 样式： .line-heightheight:100px;line-height:100px;overflow:hidden;zoom:1; .line-height iwriting-mode:tb-rl;_height:100%;vertical-align:middle;/* 使用writing-mode:tb-rl;height:100%;兼容IE6 */ 这种方式的优点是：同时支持块级和内联极元素；支持图片和图片以及图文混排。缺点是：只能显示一行。说明：这里使用writing-mode兼容ie6，参考
6、了blueidea的那篇文章，以前算是孤陋寡闻吧，看来对ie使用“以毒攻毒”的办法还是挺有效的嘛。同时在结构上也做了调整，传统的方式（即box里面嵌套一个span，然后把img放里面对span使用与i类似的样式）如果是把两张图放在span里面，则IE6下两张图会上下排列（writing-mode的缘故），所以小弟在此做了一点点改进。2、 使用定位方法结构如下（下面4、5点的结构也一样，除了box的扩展类名不同）： 火云 火云优点：所有浏览器都支持；支持图片和图片以及图文混排。缺点：垂直方向的居中不完美，需要根据box的高度作调整；需额外嵌套一层标签。说明：这个应该不算什么新方法了吧，以前做垂直
7、居中都用这法子。定位确实是一种很不错的布局方式，如果不考虑IE6，float早可以回家休息了（貌似也不远了，请参考拜拜了,浮动布局-基于display:inline-block的列表布局，此文将让您有足够的理由放弃float）。3、 对box使用padding-bottom=padding-top方法结构和第1点类似，除了box的扩展类名不同，少了ie注释。样式如下：.paddingpadding-top:3em;padding-bottom:3em;/* 当然也可以用绝对值 */优点：支持图片和图片以及图文混排；支持所有浏览器。缺点：box的高度不能固定。说明：如果box的高不固定，这算是最
8、简单的一种方法了吧，简单到用起来的时候心里头都慌慌的（就像大中小学生对待1加1等于几那个问题一样_）。可是经过测试，在所有主流浏览器下都有效，读者可以试着换张灰常大的图试试（我没测试哈）。4、 使用font-size方法结构同上，样式如下：.font-sizeheight:100px;.font-size .innerfont-size:50px;*font-size:65px;_font-size:80px;.font-size .inner afont-size:14px;vertical-align:middle;优点：支持图片和图片以及图文混排。文本需重定义font-size。缺点：f
9、ont-size值强烈依赖box的height值；一个font-size值不能兼容所有浏览器，ie6、7下需做另外调整；目前Opera(10.6)不支持这种方法；需额外嵌套一层标签。说明：这应该是几种方法中最蛋疼的一种了吧，兼容性也最差，在实际操作中尽量避免吧。5、 使用display:table-cell方法结构同上，样式如下：.table-cellheight:100px;display:table;.table-cell .innerdisplay:table-cell;vertical-align:middle;优点：完全按照table式布局。但要注意合法的table-cell元素应该
10、作为table元素的子元素出现；支持图片和图片以及图文混排。缺点：IE6/7不支持(要用hack，可以与定位法杂交)；需额外嵌套一层标签。说明：这种方法也不是什么新法子，模拟表格做布局，你懂的。6、使用inline-block方法结构同1，样式如下：.inline-blockheight:100px;.inline-block:aftercontent:.;visibility:hidden;display:inline-block;height:100%;vertical-align:middle;.inline-block idisplay:inline-block;height:100%;vertical-align:middle;/* ie6/7下可以使用此方法兼容 */.inline-block imgvertical-align:middle;优点：如果不用:after伪元素而是添加一个额外的标签（如i），可兼容所有浏览器；支持图片和图片以及图文混排。缺点：IE6/7不支持:after伪元素，这时需要用hack（
