将 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”的右侧有我要删除的空间，因此该块将一直显示到最后一个正方形，并且所有块都将居中对齐。

编辑： 请查看这张照片：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。小提琴：http://jsfiddle.net/anPF2/7/

此外，CSS 应该用于图像的高度和宽度，而不是 height="300" 等属性。小提琴反映了这种变化。

Answer 2

使用display:inline-block 需要额外的边距。删除那些设置 font-size:0px 到 #out 容器。见demo

Answer 3

这就是你想要达到的目标？ demo

img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}

#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}

#inside {
position: relative;
background: #e2e2f2;
}

Answer 4

在布局 css 时不应该使用像素，它会使其非常僵化，并且可能会给使用高分辨率屏幕和低分辨率屏幕的人带来问题。最好将其声明为 % 或 em（在使用宽度时，% 可能仍然稍好一些，但高度的 em 是完美的）

首先，“外部”div 必须声明为小于其内部。例如，如果“外部”在主体内部：

#outer{
    width: 100%;
}
#inside{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#inside img{
    height: 110px;
    width: 110px;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 0.5em;
    float: left;
}

好吧，既然“inside”是“outer”宽度的 80%，margin-left:auto、margin-right:auto 一起使“inside”div 居于“outer”内。

将 float 属性设置为向左移动内部的所有 imgs 以始终尝试向左移动。

编辑：我在查看了您提供的图片后解决了这个问题。

我没有对此进行测试，但我相信它应该可以工作，如果您遇到更多问题，请告诉我。

Answer 5

要使框不占据页面的整个宽度，请尝试在 #out 上将宽度设置为小于 100%，并添加 margin:auto; 使其居中。

#out {
    width: 90%;
    margin:auto;
}

http://jsfiddle.net/anPF2/36/