html - 居中对齐行内 block 元素的集合而不居中每个元素

Question

我的代码中有一个复杂的层次结构，无法真正更改。它是包含图像的内联 block div 的集合，在外部 div 内部。像这样:

<div> <!-- text-align: center -->
    <div><img/></div><!-- display: inline-block -->
    <div><img/></div><!-- display: inline-block -->
    <div><img/></div><!-- display: inline-block -->
    <div><img/></div><!-- display: inline-block -->
    <!-- ... -->
</div>

我需要这些图像根据用户浏览器窗口填充屏幕。我还需要图像本身左对齐 - 所以如果浏览器每行可以容纳 5 张图像，而最后一行只有 1 张图像，则该图像需要一直向左对齐，而不是居中。但是，我需要整个组居中对齐，所以我们在右侧没有很大的空白。

我尝试在层次结构中添加另一个 div，如下所示:

<div><!-- text-align: center -->
    <div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <div><img/></div><!-- display: inline-block -->
        <!-- ... -->
    </div>
</div>

这是行不通的，因为中间的 div 尽管是内联 block ，但最终还是全宽。可以在此处找到示例:http://jsfiddle.net/cwmRw/

关于如何执行此操作的任何想法？谢谢!

Answer 1

您可以使用 CSS3 媒体查询通过根据不同的分辨率边界值设置 div 的宽度来执行此操作。我已经在此处复制了 css，以防 jsfiddle 不会永远保留它。

.img-block{
    max-width: 160px;
    max-height: 160px;
}
.div-block{
    display: inline-block;
}
.img-container{
    margin-left: auto;
    margin-right: auto;
}

@media all and (min-width:984px){
    .img-container{
        width: 985px;
    }
}

@media all and (min-width:820px) and (max-width: 984px){
    .img-container{
        width: 820px;
    }
}
@media all and (min-width:656px) and (max-width:820px){
    .img-container{
        width: 656px;
    }
}
@media all and (min-width:492px) and (max-width:656px){
    .img-container{
        width: 492px;
    }
}
@media all and (min-width:328px) and (max-width:492px){
    .img-container{
        width: 328px;
    }
}
@media all and (min-width:164px) and (max-width:328px){
    .img-container{
        width: 164px;
    }
}

这是原始代码的修改版本 http://jsfiddle.net/hxHuV/9/