将div居中对齐并使其内容向左对齐

Question

将div居中对齐并使其内容向左对齐

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;
}

Live版本在这里：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的解决方案。如果你有，请务必告诉我。

谢谢大家！

- Shai

Fiddle没有显示CSS。 - Dhaval Marthak

1

“div应该占据尽可能多的空间” - 如果它占用了所有可用空间，那么它将如何居中？ - Zhihao

我的想法完全一样...我认为他的意思是，他希望它在添加2、3、4张图片时仍然居中... - Jamie Hutber

1

抱歉，也许我没有解释清楚。请看这张照片：https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg - Shai

你能否将图片添加到帖子中或使其可访问，以查看是否有人在这么长时间后可以修复，我需要完全相同的。 - Yandy_Viera

显示剩余3条评论

5个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AndrewB · Answer 1

在布局CSS时不应使用像素，这会使其非常死板，并可能导致高分辨率屏幕和低分辨率屏幕的问题。最好将其声明为百分比或em（在宽度方面，百分比仍然可能略优，但em在高度方面是完美的）

首先，“外部” div 必须声明比里面小。例如，如果“外部”在 body 中：

#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”宽度的80％是“outer”的宽度，所以margin-left:auto和margin-right:auto一起使“inside” div在“outer”中居中。

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

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

我还没有测试过这个，但我相信它应该可以工作，如果您遇到更多问题，请告诉我。

- sylwia · Answer 2

这是你想要实现的吗？演示

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;
}

- DACrosby · Answer 3

0

为了让方框不占用整个页面宽度，可以尝试在#out上设置宽度小于100％并添加margin:auto;以使其居中。

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

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

- DACrosby

谢谢，但这不是我想要的。我想把右边的空间切掉并让它消失，这样如果你有足够的空间（高屏幕分辨率）可以放置10张图片，你将看到10张没有间隔的图片。 - Shai

我相信你需要JavaScript来完成这个。这个fiddle很接近，但并不完美，特别是在小尺寸下似乎有些问题。 - DACrosby

是的，不得不使用JS，现在它运行良好。只是有点奇怪，这样的事情不能通过CSS完成。 - Shai

如果可以的话，目前超出了我的能力范围。使用 text-align:center 可以正常工作，但您想要将尾随元素向左对齐。嗯...我会密切关注并进行更新，如果发现任何问题。 - DACrosby

- Mooseman · Answer 4

指定#inside的width属性以使其居中。我使用了width: 120px。Fiddle链接：http://jsfiddle.net/anPF2/7/

此外，应该使用CSS来设置图片的高度和宽度，而不是像height="300"这样的属性。Fiddle已经反映了这个变化。

- Ahsan Khurshid · Answer 5

使用display:inline-block会产生额外的边距。为了去除这些边距，需要将#out容器的font-size设置为0px。请参见演示