(css打造图片垂直居中自动排列效果.docVIP

css打造图片垂直居中自动排列效果 div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说，更是让大家头疼。尤其是在图片大小不固定的情况下，更是麻烦。记得刚工作的时候就碰到这样的问题，费了九牛二虎之力才垂直剧中了结果，文字显示不了链接…… 下面来看一个典型实用的CSS布局实例，CSS实现图片的水平居中、垂直居中，在Div区块内，图片是未知宽高。不论使用何种尺寸的图片，它都会居中于DIV中，虽然代码有点多，但是兼容性方面做的挺好。 div class=maincss style=text-align:center; width:978px;border:1px solid #ccc; div style= text-align:center; width:960px asp:Repeater ID=Rep_img runat=server ItemTemplate a href=LiangZhao_View.aspx?img_id=%# Eval(img_id).ToString()% style=text-decoration:none;border:1px 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%# Eval(img_SmallUrl).ToString() % %# Config.img_WH(s/stuImages+Eval(img_SmallUrl).ToString(),120,90) % style=border:1px solid #DFDFDF; vertical-align:middle; /a /ItemTemplate /asp:Repeater /div /div 这里使用了position属性relative使其相对定位模式，在应用float:left使其自动排列对齐，最终效果如下图所示： 这种方法不适合图片加标题模式，下面来介绍一种用li来实现图片加标题自动排列效果！ div style= text-align:center; width:960px ul class=zxx_align_box_6 fix asp:Repeater ID=Rep_img runat=server ItemTemplate li a href=ShootingImg_View.aspx?id=%# Eval(sh_Id).ToString()% target=_blank img class=show_img src=%# Eval(sh_SmallUrl).ToString() % %# Config.img_WH(Eval(sh_SmallUrl).ToString(),120,90) % / img class=alpha_img src=../image/pixel.gif / div style=width:100%; height:20px; line-height:20px; cursor:hand; text-align:center; margin-top:-8px;%#Eval(sh_Title).ToString()%/div /a /li /ItemTemplate /asp:Repeater /ul /div 对li的样式设置如下： style type=text/css .zxx_align_box_6 li{height:110px; width:150px; padding:13px 12px; float:left; margin:10px 8px; margin-right:5px; border:1px solid #beceeb; text-align:center; font-