Why are these divs not aligned and space between?
- by acidzombie24
Why isnt everything aligned? No yellow should be visible and no orange should be visible except for the right side and bottom left where theres space for another image.
Basically my images are pretty much aligned to the center (i have other pics not in this example which is easier to see). However in this case when i have 150px height image the 150 width seems start lower. Also why are there spaces in between
<!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>
