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

2024-09-05 12:17:09

字体：大中小

来源：转载

供稿：网友

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/2024/09-05/675180936259a23ecb9af59713106159.jpg" /></SPAN>
</div>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1556500.html'>CSS实现在FireFox下截取字符串显示省略号</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1556502.html'>CSS3跟随鼠标的眼睛转动效果</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

学习交流