我正在尝试将此画廊中的图像自动居中,无论我做什么,他们都拒绝去中心。是的,我明白不应该再使用,但它仍然应该工作。请帮忙 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;
}
答案 0 :(得分: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>";
检查小提琴的工作正常.. :))
答案 1 :(得分:0)
只需将text-align: center;
添加到#imageList
即可。这是一个演示:http://jsfiddle.net/VLJYq/
答案 2 :(得分:0)
这一切都是因为您使用的浮动样式,如果您使用类&#39; galleryImg&#39;删除div,它将正常工作。
echo "<img src='images/gallery/".$files[$i]."' width='180' onclick='showImage(\"".$files[$i]."\")'>";
尝试这个。
答案 3 :(得分:0)
只需添加:
width: 731px;/* change from 825px */
display: inline-block;//new added
到#imageList
注意:我已对此进行了测试。
答案 4 :(得分:0)
在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;}
如果它不起作用,请告诉我。
答案 5 :(得分:0)
你应该改变&#34; .galleryImage&#34;的高度和宽度。 css类,像这样:
.galleryImage {
float: left;
height: 243px; /* changed from 180*/
overflow: hidden;
width: 205px; /* changed from 180*/
}
我已经在你的链接上测试了它,它运作良好。
答案 6 :(得分:0)
尝试使用保证金
margin:0 auto;
答案 7 :(得分:0)
只需重写此风格
.galleryImage {
width: 180px;
height: 180px;
display: inline-block;
overflow: hidden;
}