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的解决方案。如果你有一个，我非常想知道它。

谢谢eveyone！

Answer 1

为width指定#inside以使其居中。我用了width: 120px。小提琴：http://jsfiddle.net/anPF2/7/

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

Answer 2

使用display:inline-block需要额外的利润。要将font-size:0px设置为#out容器。请参阅demo

Answer 3

在布置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;
}

好的，因为“内部”是“外部”宽度的80％，左边距：auto，margin-right：auto一起使“内部”div中心位于“外部”。

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

编辑：我看了你提供的照片后修好了。

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

Answer 4

这是你想要实现的目标？ 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 5

要使框不能覆盖整个页面宽度，请尝试在#out上设置小于100％的宽度，然后添加margin:auto;使其居中。

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

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

将div与中心对齐，将其内容对齐到左侧

5 个答案: