Aligning div to center and its content to the left

问题

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.

Code:

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

and the 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/ 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: Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg It explains better what I'm trying to get.

EDIT 2: I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ ) https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg

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.

Thanks eveyone!

回答1:

Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/

Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.

回答2:

use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo

回答3:

This is what you want to achieve? 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:

You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)

First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside 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;
}

Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".

Setting the float property to left moves all the imgs of inside to always try to move left while it can.

EDIT: I fixed this after looking at your picture you provided.

I haven't tested this but I believe it should work, let me know if you are having more problems.

回答5:

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/

来源：https://stackoverflow.com/questions/16773178/aligning-div-to-center-and-its-content-to-the-left