将div对齐到中心，将其内容向左对齐 [英] Aligning div to center and its content to the left

问题描述

我想要一个以文档为中心的div。

I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.

我想要创建的是图片库，其中包含行和

What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.

代码：

<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 version here： http://jsfiddle.net/anPF2/10/
正如你会注意到，在#inside的右侧有一个空格，

Live version here: http://jsfiddle.net/anPF2/10/ As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.

EDIT： $ b $ b请检视这张相片： https://www.dropbox.com/s/qy6trnmdks73hy5/css .jpg
它更好地解释了我想要得到什么。

Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg It explains better what I'm trying to get.

编辑2：
我已经上传了另一张照片，以显示它应该如何在较低分辨率的屏幕上进行调整。注意左边和右边的边距。这是我想得到的（到目前为止失败：\）
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg

EDIT 3 / ANSWER
好​​，谢谢大家解决我的问题。我使用JS解决了这个问题，使用一个函数来监听屏幕调整大小事件。这些函数检查右边距的大小，并在左侧添加填充，以便所有内容都居中。我没有找到使用CSS的解决方案。如果你有一个，我非常想知道它。

EDIT 3 / ANSWER well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.

感谢eveyone！

推荐答案

要使框不会跨越页面的整个宽度，请尝试在 #out 上设置宽度小于100％，然后添加 margin：auto; 将它居中。

To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.

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

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

这篇关于将div对齐到中心，将其内容向左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！