3

我想要一个以文档为中心的 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 的解决方案。如果你有的话，我很想知道。

谢谢大家！

4

5 回答 5

0

使用display:inline-block需要额外的利润。删除那些设置font-size:0px到#out容器。查看演示

于 2013-05-27T12:32:08.760 回答
0

指定一个widthfor#inside使其居中。我用过width: 120px。小提琴： http: //jsfiddle.net/anPF2/7/

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

于 2013-05-27T12:28:37.303 回答
0

你不应该在布局你的 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%，margin-left:auto、margin-right:auto 一起使“内部”div 居中在“外部”内。

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

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

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

于 2013-05-27T12:36:56.027 回答
0

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

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

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

于 2013-05-27T13:00:01.210 回答
0

这就是你想要达到的？演示

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;
}
于 2013-05-27T12:37:52.413 回答