html - 在div中居中图像

Question

我正在尝试让这个图库中的图像自动居中，但无论我做什么，它们都拒绝居中。是的，我知道不应该再使用了，但它仍然可以工作。请帮忙 HTML

<div id='gallery_gallery'>
            <center>
                    <div id='imageList'>
                    <center>
                    <?php
                        $directory = 'images/gallery';
                        $files = scandir($directory);
                        $file_length = sizeof($files);
                        $to = 16;
                        $start = 2;
                        if($to > $file_length) $to = $file_length;
                        for($i=$start; $i <= $start-1+$to; $i++)
                        {
                            echo "<div class='galleryImage'><img src='images/gallery/".$files[$i]."' width='100%' onclick='showImage(\"".$files[$i]."\")'></div>";
                        }
                    ?>
                    </center>
                    </div>
                </center>
            </div>

CSS

#gallery_gallery
{
position: absolute;
top: 75px;
left: 80px;
width: 825px;
height: 960px;
}
#imageList
{
background-color: yellow;
width: 825px;
text-align: center;
}
.galleryImage
{
width: 180px;
height: 180px;
float: left;
overflow: hidden;
}
.galleryImage img
{
min-width: 100%;
min-height: 100%;
padding: 10px;
}
.galleryImage img:hover
{
cursor: pointer;
}

结果 http://sonny.hostingsiteforfree.com/gallery.html

Answer 1

我看到 CSS 不符合标准。

ImageWrapper galleryImage 有 overflow:hidden 图像 galleryImage img 有 padding:10px 这会导致一切在这里变得不稳定。

我创建了一个 fiddle在这里您可以检查更改...

CSS:

#gallery_gallery {
    position: absolute;
    top: 75px;
    left: 80px;
    width: 825px;
    height: 960px;
    text-align:center;
    background:#777;
}
#imageList {
    background-color: yellow;
    width: 825px;
    text-align: center;
    margin-left:10px;
}
.galleryImage {
    width: 180px;
    height: 180px;
    float: left;
    overflow: hidden;
    margin:10px 10px;
}

.galleryImage img {
    min-width: 100%;
    min-height: 100%;

}
.galleryImage img:hover {
    cursor: pointer;
}

另外，我们需要关闭PHP代码中的img标签。使用标签 />

的自闭合

这会导致您的图像样式无法正常工作。

 echo "<div class='galleryImage'><img src='images/gallery/".$files[$i]."' width='100%' onclick='showImage(\"".$files[$i]."\")' /></div>";

检查 fiddle 是否正常工作.. :)