html - 将 div 居中对齐，其内容向左对齐

Question

我想要一个以文档为中心的 div。 div 应占用所有空间来显示内容，并且内容本身应左对齐。

我想创建的是图片库，其中的行和列居中，当您添加新的拇指时，它会左对齐。

代码:

<div id="out">
    <div id="inside">
        <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>   
        <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>   
        <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>   
        <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>   
        <img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/> 
    </div>
</div>

和CSS:

img {
    height: 110px;
    width: 110px;
    margin: 5px;
}

#out {
    width: 100%;
}

#inside {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    background: #e2e2f2;
}

现场版在这里:http://jsfiddle.net/anPF2/10/您会注意到，在“#inside”的右侧有一个我想删除的空间，因此该 block 将显示到最后一个方 block ，并且所有方 block 都将居中对齐。

编辑:请查看此照片:https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg它更好地解释了我想要得到的东西。

编辑 2:我上传了另一张照片来展示它在低分辨率屏幕上应该如何调整。注意左边和右边的边距。这就是我想要得到的(到目前为止没有成功:\) https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg

编辑 3/回答好吧，谢谢大家尝试解决我的问题。我使用 JS 解决了这个问题，它有一个监听屏幕调整大小事件的函数。这些函数检查右边距的大小并向左侧添加填充，以便所有内容都居中。我没有找到使用 CSS 的解决方案。如果你有，我非常想知道。

谢谢大家!

Answer 1

为 #inside 指定一个 width 使其居中。我使用了 width: 120px。 fiddle :http://jsfiddle.net/anPF2/7/

此外，图片的高度和宽度应该使用CSS，而不是height="300"等属性。 fiddle 反射(reflect)了这一变化。