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;
}

RESULT 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>";

检查小提琴的工作正常.. :)）

Answer 2

只需将text-align: center;添加到#imageList即可。这是一个演示：http://jsfiddle.net/VLJYq/

Answer 3

这一切都是因为您使用的浮动样式，如果您使用类＆＃39; galleryImg＆＃39;删除div，它将正常工作。

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

尝试这个。

Answer 4

只需添加：

width: 731px;/* change from 825px */
display: inline-block;//new added

到#imageList

注意：我已对此进行了测试。

Answer 5

删除你的CSS
删除＆＃34; center＆＃34;您编写的#gallery_gallery标记。

在CSS下面应用。

 .pageWrap { margin: auto; width: 1000px;}

 #main_content_gallery {background: url("../images/gallery_bg.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);height: 1722px;padding: 72px;}

 .main_content {clear: both;width: 100%;}

 #gallery_gallery {clear: both;margin: 0 61px;padding: 0;width: 100%;}

 #imageList {background-color: yellow;clear: both;float: none;text-align: center;width: 80%;}

 .galleryImage {float: left;height: 180px;overflow: hidden;width: 180px;}

 .galleryImage img {min-height: 100%;min-width: 100%;padding: 10px;}

 #imageList {text-align: center;}

 #mainmenu {left: 1px;position: relative;width: 800px;}

 #mainmenu, #mainmenu ul {list-style: none outside none;margin: 0;padding: 0;}

 .pageWrap {margin: auto; width: 1000px;}

 #mainmenu a {color: black;float: left;font-family: 'Coda',cursive;font-size: 20px;padding: 0 30px 12px;text-decoration: none;text-shadow: 0 1px 0 #000;}

 #floatBox {background-color: rgba(0, 0, 0, 0.5);display: none;height: 100%;left: 0;position: fixed;top: 0;width: 100%;}

 #float_image { height: 600px;}

 #float_tools {margin: auto;opacity: 0.3;transition: opacity 0.5s ease-out 0s;width: 50px;}

 #floatimg {border: 10px solid white;border-radius: 5px;float: none;height: 550px;}

如果它不起作用，请告诉我。

Answer 6

你应该改变＆＃34; .galleryImage＆＃34;的高度和宽度。 css类，像这样：

.galleryImage {
    float: left;
    height: 243px;   /* changed from 180*/
    overflow: hidden;
    width: 205px;   /* changed from 180*/
}

我已经在你的链接上测试了它，它运作良好。

Answer 7

尝试使用保证金

margin:0 auto;

Answer 8

只需重写此风格

 .galleryImage {
width: 180px;
height: 180px;
display: inline-block;
overflow: hidden;
}

将图像置于div中

8 个答案: