Why are these divs not aligned and space between?_问答_开发者

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

Why are these divs not aligned and space 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
{
  开发者_JAVA百科  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>

Here's the code:

<!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" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Przykładowy dokument</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a img {
            border: none;
        }

        #gallery {
            width: 650px;

            background: orange;
        }

        #gallery li {
            display: inline-block;

            background: yellow;
            border: 1px solid black;
        }

        #gallery img {
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript"></script>
</head>
<body>
    <ul id="gallery">
        <li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li>
    </ul>
</body>
</html>

And here is the explanation:

Gallery is a kind of list so it should be presented in code as a list.
These blank spaces between images where caused by the fact that images were treated as inline elements. And you should know that one or more white char (space, enter, tab and so on) between inline elements in code is presented as a single space in browser. It's the same situation as when writing a text (which is inline).
Vertical alignment can be obtained using vertical-align property.

Try the following changes, Hopefully this is what your are looking at, if you want no yellow color to be shown use float property of CSS.

.ImgGallery div
{
   display: inline-block;
}

.ImgGallery div div
{

/*display: table-cell;
 */
text-align: center;
background: gray;
width: 150px;
height: 150px;

}

A different issue is that your code seems to be failing standards. Try this link http://validator.w3.org/#validate_by_input