Home/ Questions/Q 676509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T00:56:09+00:00

Why isnt everything aligned? No yellow should be visible and no orange should be

  • 0

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

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

alt text
alt text 

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    1. Gallery is a kind of list so it should be presented in code as a list.
    2. 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).
    3. Vertical alignment can be obtained using vertical-align property.
    • 0