php - 除最后一行外的中心 float

Question

我需要将一些 float 的 div 在容器中居中。我正在使用的代码有效，但我需要最后一行 float 元素向左对齐而不是居中。这是一个相册，所有缩略图都是由图库脚本自动生成的。

This is what the code produces

This is what I need

我认为单独使用 css 是不可能的，也许一些 jquery 或 php...

CSS

#gallery {
    background-color: #ffffff;
    border: 1px solid #999999;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 750px;
}

.image {*display:inline;
    background: #F7F9FD;
    border: 1px solid #E7F0F5;
    display: -moz-inline-stack;
    display: inline-block;
    line-height: 100%;
    margin: 1em;
    padding: 0;
    text-align:left;vertical-align:top;
    zoom:1;
}

.imagethumb a, .imagethumb a:hover {
    border:0;
    display: block;
    margin: 5px;
}

.imagethumb {float: left;}

.clear {clear: both}

PHP代码

<div id="gallery">
<?php while (next_image(false, $firstPageImages)): ?>
<div class="image">
<div class="imagethumb">
<a href="<?php echo htmlspecialchars(getImageLinkURL());?>" title="<?php echo getBareImageTitle();?>"><?php printImageThumb(getAnnotatedImageTitle()); ?></a>
</div>
</div>
<?php endwhile; ?>
</div>

生成的 html

<div id="gallery">

<div id="images">

<div class="image">
<div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
</div>
<div class="image">
<div class="imagethumb"><a href="/zen/p101-02.jpg.php" title="p101-02"><img src="/zen/cache/p101-02_110_thumb.jpg" alt="p101-02" /></a></div>
</div>
<div class="image">
<div class="imagethumb"><a href="/zen/p101-04.jpg.php" title="p101-04"><img src="/zen/cache/p101-04_110_thumb.jpg" alt="p101-04" /></a></div>
</div>
[...]
</div>

Answer 1

不确定你在用那些讨厌的技巧做什么……不需要 jquery 或 php。只是 CSS。

这对我来说很好用。我确实在图像上添加了宽度和高度，因为我不想真正获得图像。但都一样。

CSS

#gallery { background-color: #fff; border: 1px solid #999; margin: 0 auto; overflow: hidden; position: relative; text-align: center; width: 750px; }
.imagethumb a, 
.imagethumb a:hover { border:0; display: block; margin: 5px; }
.imagethumb {float: left; margin:5px; background: #F7F9FD; border: 1px solid #E7F0F5; width:100px; height:200px;} 
.clear {clear: both}

HTML 最终输出

<div id="gallery">
    <div id="images">
        <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    </div>
  <div class="clear"></div>
</div>