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

Posted 2023-03-05

【中文标题】将 div 居中对齐，并将其内容向左对齐

【英文标题】：Aligning div to center and its content to the left

【发布时间】：2013-05-22 07:26:56

【问题描述】：

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

谢谢大家！

【问题讨论】：

小提琴不显示 CSS

"div 应该占据所有空间" - 如果它占据了所有可用空间，它将如何居中？

我的想法完全正确...我认为他的意思是，他希望它居中，同时能够添加 2,3,4 等图像并且仍然使这些居中...

对不起，我可能没有解释清楚。请看这张照片：dropbox.com/s/qy6trnmdks73hy5/css.jpg

查看fiddle。

【参考方案1】：

为#inside 指定一个width 以使其居中。我用width: 120px。小提琴：http://jsfiddle.net/anPF2/7/ 此外，CSS 应该用于图像的高度和宽度，而不是 height="300" 等属性。小提琴反映了这种变化。

【参考方案2】：

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

【讨论】：

谢谢，但这对我不起作用。你能看一下我刚刚添加的照片的链接吗？

【参考方案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;

【讨论】：

谢谢，但这不是我想要的 :-/ 我想剪掉右侧多余的空间，然后将所有块居中（查看我上传的照片）

【参考方案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 以始终尝试向左移动。

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

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

【讨论】：

看到你的图片后：你希望“inside”的宽度为 80% 或其他东西，并且在 #inside 标签内也需要 margin-left: auto、margin-right: auto。您可以自己声明“外部”的宽度，并明确：两者； img 标签不需要。其他一切都应该让它发挥作用。

我希望“#inside”div 的宽度取决于用户分辨率。如果它足够高以显示 10 张图像，那么就可以了，如果只有 5 则 5。我试过你的代码，但我仍然在右边得到恼人的边距：-\

浮动：左；表示如果右边的div没有空格，会移动到下一行，让div变长

再次感谢，但它仍然无法正常工作。看看这里：jsfiddle.net/anPF2/42 - 改变预览窗口的宽度，看看当你调整大小时，div 不会自己居中。

是的，你刚刚描述了我的问题。当一行中的另一个图像没有足够的空间时，我确实希望它转到新行，但我也希望容器 div 变得更小并居中。用 CSS 无法解决这个问题似乎有点奇怪。我可以编写一些 JS 来解决这个问题，但我真的很想避免它，所以所有样式都不会受到 JS 的影响...... :-/ 非常感谢你到目前为止的帮助！ :)

【参考方案5】：

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

#out 
    width: 90%;
    margin:auto;

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

【讨论】：

谢谢，但这不是我想要的。我想在右边剪掉右边的空间并让它消失，所以如果你有足够的空间（高屏幕分辨率）容纳 10 张图像，你会看到 10 张没有间距。

我相信你需要 javascript。 This fiddle is close，但不是很完美，尤其是在小尺寸时。

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

如果可以的话，我现在已经超出了我的范围。它适用于text-align:center，但您希望尾随元素位于左侧。嗯...如果我发现任何东西，我会留意并更新。