css打造图片垂直居中自动排列效果.doc
文本预览下载声明
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-size:10px; background-color:White;}
.zxx_align_box_6 li .alpha_img{height:100%; width:1px;
显示全部