<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
* { margin:0; padding:0; }
ul { clear:both; }
.test_box { display:table-cell; width:110px; height:110px; vertical-align:middle; text-align:center; *float:left; *font-family:simsun; *font-size:0px;*line-height:1; border:1px solid #000000; margin:20px; }
.test_box img { vertical-align:middle; }
.test_box2 { display:table-cell; width:250px; height:250px; line-height:250px; font-size:0; vertical-align:middle; text-align:center; *display:block; *float:left; *font-size:218px; *font-family:'Arial'; margin:20px; border:1px solid #000; } <!--font-size:height*0.873; 加line-height偏下，去掉偏上-->
.test_box2 img { display:inline; max-width:250px; max-height:250px; vertical-align:middle; }
.test_box3 { display:table-cell; width:110px; height:110px; vertical-align:middle; text-align:center; font-size:0px; background-color:pink; margin:20px; *display:block; *float:left; }
.test_box3 img { display:inline-block; vertical-align:middle; *margin-top:expression((parentElement.offsetHeight-this.offsetHeight)/2); } <!--当父元素有边框时，margin-top值要-1-->
</style>
<div class="Box">
<ul>
<li class="test_box"><img src="Image/100x100.jpg" alt="" /></li>
<li class="test_box"><img src="Image/100x100.jpg" alt="" /></li>
<li class="test_box"><img src="Image/100x100.jpg" alt="" /></li>
</ul>
</div>
<div class="Box2">
<ul>
<li class="test_box2"><img src="Image/271x271.jpg" alt="" /></li>
<li class="test_box2"><img src="Image/230x230.jpg" alt="" /></li>
<li class="test_box2"><img src="Image/100x100.jpg" alt="" /></li>
</ul>
</div>
<div class="Box3">
<ul style="clear:both;">
<li class="test_box3"><img src="Image/100x100.jpg" alt="" /></li>
<li class="test_box3"><img src="Image/100x100.jpg" alt="" /></li>
<li class="test_box3"><img src="Image/100x100.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
* { margin:0; padding:0; }
ul { clear:both; }
.test_box { display:table-cell; width:110px; height:110px; vertical-align:middle; text-align:center; *float:left; *font-family:simsun; *font-size:0px;*line-height:1; border:1px solid #000000; margin:20px; }
.test_box img { vertical-align:middle; }
.test_box2 { display:table-cell; width:250px; height:250px; line-height:250px; font-size:0; vertical-align:middle; text-align:center; *display:block; *float:left; *font-size:218px; *font-family:'Arial'; margin:20px; border:1px solid #000; } <!--font-size:height*0.873; 加line-height偏下，去掉偏上-->
.test_box2 img { display:inline; max-width:250px; max-height:250px; vertical-align:middle; }
.test_box3 { display:table-cell; width:110px; height:110px; vertical-align:middle; text-align:center; font-size:0px; background-color:pink; margin:20px; *display:block; *float:left; }
.test_box3 img { display:inline-block; vertical-align:middle; *margin-top:expression((parentElement.offsetHeight-this.offsetHeight)/2); } <!--当父元素有边框时，margin-top值要-1-->
</style>
<div class="Box">
<ul>
<li class="test_box"><img src="Image/100x100.jpg" alt="" /></li>
<li class="test_box"><img src="Image/100x100.jpg" alt="" /></li>
<li class="test_box"><img src="Image/100x100.jpg" alt="" /></li>
</ul>
</div>
<div class="Box2">
<ul>
<li class="test_box2"><img src="Image/271x271.jpg" alt="" /></li>
<li class="test_box2"><img src="Image/230x230.jpg" alt="" /></li>
<li class="test_box2"><img src="Image/100x100.jpg" alt="" /></li>
</ul>
</div>
<div class="Box3">
<ul style="clear:both;">
<li class="test_box3"><img src="Image/100x100.jpg" alt="" /></li>
<li class="test_box3"><img src="Image/100x100.jpg" alt="" /></li>
<li class="test_box3"><img src="Image/100x100.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
