未知图片大小的自动水平和垂直居中方法

2020-01-27 14:18:34

字体：大中小

来源：转载

供稿：网友

JS实现未知大小的图片在已知大小的容器中水平和垂直剧中，我觉得在写瀑布流布局的时候能用得上，和瀑布流觉得挺相似的效果，作者在关键点都加入了注释，确认对学习CSs是相当有价值的代码。为了演示快速，这里去掉了一些Li图片，需要时自己可以再多加几个li未知尺寸的图片看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>图片自动垂直居中</title><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><style type="text/css"></style><style type="text/css">/* IE下的垂直居中*/.edge {width:0; height:100%; display:inline-block; vertical-align:middle;} .container {text-align:center; width:100%; display:inline-block; vertical-align:middle;line-height:80%;}/*加上line-height:80%主要是消除在IE-Firefox-Chrome三个浏览器图片下方多出的空白,使图片四周空白宽度一样*/</style></head><body><div id="forestganMiddle"> <ul id="FgWrap">    <li>    <div class="boxinner"><span class="edge"></span><span class="container"><img alt="" src="/d/file/p/2020/01-27/bad56d0a0d87f53dc2a7c85e576c0e5b.jpg" /></span></div>    </li>    <li>    <div class="boxinner"><span class="edge"></span><span class="container"><img height="40" alt="" width="65" src="/d/file/p/2020/01-27/946d994c3ff754d5fcb06b44de84e28c.jpg" /></span></div>    </li></ul></div></body></html>

上一篇：CSS3跟随鼠标的眼睛转动效果

下一篇：CSS实现在FireFox下截取字符串显示省略号

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注