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

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   class="uu6kwy0"   id="forestganMiddle"> <ul id="FgWrap">    <li>    <div   id="ckkcuwm"   class="boxinner"><span id="mkywso2"    class="edge"></span><span id="qyuksoa"    class="container"><img alt="" src="/d/file/p/2024/09-05/675180936259a23ecb9af59713106159.jpg" /></SPAN>
</div>
</div>
<div   id="ogcu0ic"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="ueeykau"   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   id="msek8ym"   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">

學習交流