cssQuote 原文： gallery layout—smells like a table
翻译自：
译者的话：真的没有时间一字一句的翻译，将主要部分吧效果图


结构代码<ul class="gallery">
 <li><a href="#" title="Klik za veu sliku"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741152031214.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>
 <li><a href="#" title="Klik za veu sliku"><img src="http://file.wbgxw.com/UpLoadPic/2007-4/200741152031214.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>
 .
 .
 .
 Rinse and repeat for sixteen images
</ul>
说明：虽然是简单的无序列表，却拥有4层嵌套，ul li a img,有这四层，基本就满足了你设计样式的拓展性。

样式.gallery{
 margin:0; padding:0;
 overflow:hidden; /* Clears the floats */
 width:100%; /* IE and older Opera fix for clearing, they need a dimension */
 list-style:none;
 }
 .gallery li{
 float:left;
 display:inline; /* For IE so it doesn't double the 1% left margin */
 width:23.8%;
 margin:0 0 10px 1%; padding:10px 0;
 height:83px; /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */
 position:relative; /* This is the key */
 background:url(45degree.png);
 }
 .gallery a,
 .gallery img{
 display:block;
 width:100%;
 }
 a img{ border:none; } /* A small fix */
 .gallery a:link,
 .gallery a:visited,
 .gallery a:focus,
 .gallery a:hover,
 .gallery a:active{
 padding:3px;
 background:#eeefef;
 width:75px; height:75px;
 border:1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
 position:absolute; top:50%; left:50%; /* position it so that image's top left corner is in the center of the list item */
 margin:-41px 0 0 -41px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
 }
 .gallery a:hover{
 border-color:#dfdfdf;
 }
 /* These are all optional, for decoration purpouses only */
 .gallery{
 border-bottom:2px solid #000;
 padding-bottom:10px;
 margin-top:10px;
 }

说明：注释文字已经说得很明白了，里面涉及的技术包括，清除浮动，已知宽度和高度元素的垂直居中，IE双倍补丁hack等。