Html 将div对齐到中心并将其内容向左对齐

我想要一个以文档为中心的div。div应该占用所有空间来显示内容，并且内容本身应该向左对齐

我要创建的是图像库，其中的行和列居中，当您添加一个新的拇指时，它将向左对齐

代码：

现场版本： 正如您所注意到的，在“#inside”的右侧有我要删除的空间，因此该块将一直显示到最后一个正方形，并且所有块都将居中对齐

编辑： 请查看此照片： 这更好地解释了我想要得到什么

编辑2: 我还拍了另一张照片，展示了如何在低分辨率屏幕上进行调整。注意左边和右边的边距。这就是我想要得到的（到目前为止没有成功：\）

编辑3/回答 谢谢大家帮我解决问题。我使用JS解决了这个问题，它有一个函数可以监听屏幕大小调整事件。这些函数检查右边距的大小，并在左边添加填充，使所有内容居中。我没有找到使用CSS的解决方案。如果你有，我很想知道

---

谢谢大家

为

#内部指定
宽度
，使其居中。我使用了
宽度：120px
。小提琴：


此外，CSS应该用于图像的高度和宽度，而不是像
height=“300”
这样的属性。小提琴反映了这一变化。
使用
显示：内联块
需要额外的边距。要删除这些设置，请将
字体大小：0px
设置到
#out
容器中。请参见
在布置css时不应使用像素，这会使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%，所以左边的边距：自动，右边的边距：自动一起构成“内”div中心在“外”之内

将float属性设置为left将移动内部的所有img，以便在可能的情况下始终尝试向左移动

编辑：我在看了你提供的图片后修复了这个问题

我还没有测试过这个，但我相信它会起作用，如果您有更多问题，请告诉我。
这就是您想要实现的目标

要使框不超过页面的整个宽度，请尝试在
#out
上将宽度设置为小于100%，并添加
边距：auto以使其居中

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

Fiddle不显示CSS“div应该占据它所能占据的所有空间”-如果它占据了所有可用空间，它将如何居中？我的想法正是。。。我想他的意思是，他希望它居中，同时能够添加2、3、4等图像，并且仍然居中…对不起，也许我没有解释清楚。请看这张照片：检查一下。谢谢，但这对我不起作用。你能看看我刚才添加的照片的链接吗？看了你的照片后：你想要“内部”的宽度为80%或者其他什么，左边距：自动，右边距：在#内部标记内也自动。您可以自己声明“外部”的宽度，并且可以清楚地声明：两者都是；img标签不需要。其他一切都应该让它工作。我希望“#inside”div的宽度取决于用户分辨率。如果它足够高，可以显示10幅图像，那么就是它，如果只有5幅，那么就是5幅。我尝试了你的代码，但我仍然得到了右边恼人的空白：-\float:left；这意味着如果右边的div中没有空格，它将移动到下一行，并使div再次变长，但它仍然不工作。看看这里：-更改预览窗口的宽度，看看当你调整大小时，div不会自动居中。是的，你刚才描述了我的问题。当行上没有足够的空间容纳另一个图像时，我确实希望它转到新行，但我也希望容器div变小并居中。看起来有点奇怪，你不能用CSS解决这个问题。我可以写一些JS来解决这个问题，但我真的想避免它，这样所有的样式都不会受到JS的影响…：-/非常感谢您迄今为止的帮助！：）谢谢，但这不是我想要的：-/我想在右侧切割多余的空间，然后将所有块居中（检查我上传的照片）谢谢，但这不是我想要的。我想在右边切一个合适的空间，让它消失，所以如果你有足够的空间（高屏幕分辨率）放10张图片，你会看到10张没有间距的图片。我相信你需要JavaScript来实现这一点，但不是很完美，尤其是在小尺寸的时候。是的，必须使用JS，现在它工作得很好。这只是有点奇怪，这样的事情不能通过CSS来完成。如果可以的话，我现在就无能为力了。它适用于
文本对齐：居中
，但您希望尾部元素位于左侧。隐马尔可夫模型。。。如果我发现了什么，我会留意并更新。
#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;
}

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

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