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

ID：8793490

大小：102.50 KB

页数：5页

时间：2018-04-07

资源描述：

《css打造图片垂直居中自动排列效果》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、css打造图片垂直居中自动排列效果div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说，更是让大家头疼。尤其是在图片大小不固定的情况下，更是麻烦。记得刚工作的时候就碰到这样的问题，费了九牛二虎之力才垂直剧中了结果，文字显示不了链接……下面来看一个典型实用的CSS布局实例，CSS实现图片的水平居中、垂直居中，在Div区块内，图片是未知宽高。不论使用何种尺寸的图片，它都会居中于DIV中，虽然代码有点多，但是兼容性方面做的挺好。

2、"text-align:center;width:978px;border:1pxsolid#ccc;">style="text-decoration:none;border:1pxsol

3、id#DFDFDF;height:90px;overflow:hidden;text-align:center;display:table;position:relative;vertical-align:middle;width:120px;padding:10px;margin:10px20px;float:left;background-color:White;"target="_blank">

4、()%>"<%#Config.img_WH("s/stuImages"+Eval("img_SmallUrl").ToString(),120,90)%>style="border:1pxsolid#DFDFDF;vertical-align:middle;">

这里使用了position属性relative使其相对定位模式，在应用float:left使其自动排列对齐，最终效果如下图所示：这种方法不适合图片加标题模

5、式，下面来介绍一种用li来实现图片加标题自动排列效果！

"target="_blank">

6、g"src="<%#Eval("sh_SmallUrl").ToString()%>"<%#Config.img_WH(Eval("sh_SmallUrl").ToString(),120,90)%>/><%#Eva

7、l("sh_Title").ToString()%>

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

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

相关文章

相关标签