Question

为什么一切都没有对齐？应该看不到黄色，除了右侧和左下方的另一个图像的空间外，不应该看到橙色。

基本上我的图像几乎与中心对齐（我在本例中没有其他图片更容易看到）。然而，在这种情况下，当我有150像素高度的图像时，150宽度似乎开始降低。为什么还有空格

http://i42.tinypic.com/2jag1w7.jpg http://i42.tinypic.com/2jag1w7.jpg

alt text http://i41.tinypic.com/14jyv88.jpg alt text http://i40.tinypic.com/25506e1.jpg

<!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>

Answer 1

尝试以下更改，希望这是您正在查看的内容，如果您不希望使用CSS的float属性显示黄色。

.ImgGallery div
{
   display: inline-block;
}

.ImgGallery div div
{

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

}

另一个问题是您的代码似乎是标准失败。试试这个链接http://validator.w3.org/#validate_by_input

Answer 2

以下是代码：

<!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>

以下是解释：

图库是一种列表，因此应以代码的形式显示在列表中。
图像之间的这些空白区域，由图像作为内联元素处理。并且您应该知道代码中的内联元素之间的一个或多个白色字符（空格，输入，制表符等）在浏览器中显示为单个空格。这与编写文本（内联）时的情况相同。
可以使用vertical-align属性获得垂直对齐。

为什么这些div不对齐且空间不对？

2 个答案: