Почему не все выровнено? Желтого цвета не должно быть видно, а оранжевого не должно быть видно, за исключением правой стороны и нижнего левого угла, где есть место для другого изображения.
В основном мои изображения в значительной степени выровнены по центру (в этом примере у меня есть другие рисунки, которые легче увидеть). Однако в этом случае, когда у меня есть изображение высотой 150px, ширина 150 кажется ниже. Также, почему есть пробелы между
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ldfk;sd</title>
<style type="text/css">
div.ImgGallery
{
max-width: 630px;
background: orange;
}
.ImgGallery div
{
display: inline;
}
/* http://www.brunildo.org/test/img_center.html */
.ImgGallery div div
{
display: table-cell;
text-align: center;
background: gray;
width: 150px;
height: 150px;
}
.ImgGallery div{
background: yellow;
vertical-align: middle;
}
//.ImgGallery div div :nth-child(2n+1) { background: red; }
.ImgGallery * {
vertical-align: middle;
}
.ImgGallery a
{
display: block;
}
.ImgGallery a *
{
border-style: none;
}
</style>
</head>
<div class="smallGallery">
<div class="ImgGallery">
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div>
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div>
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div>
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div>
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div>
<div><div><a href="http://google.com"><img src="b.jpg" alt="a.jpg"></a></div></div>
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div>
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div>
<div><div><a href="http://google.com"><img src="b.jpg" alt="a.jpg"></a></div></div>
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div>
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div>
</div></div>
</body></html>