Why are these divs not aligned and space between?
Posted
by acidzombie24
on Stack Overflow
See other posts from Stack Overflow
or by acidzombie24
Published on 2010-03-20T11:00:45Z
Indexed on
2010/03/20
11:11 UTC
Read the original article
Hit count: 571
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>
© Stack Overflow or respective owner
