Place a div to center of screen according to screen resolution in every browser

Question

How can i place the container to the center of the screen horizontally. The container has 8 images to be placed. All the images are to be aligned to a single line and should change accordingly to screen resolution.

Here is my HTML

<div id="container">
    <div id="list"   >
        <img src="img/c1.png" style="display:box; width:125px; margin-left:5px; margin-top:9px" />
        <img src="img/c2.png" style="display:box; width:125px;margin-left:5px;margin-top:9px"/>
        <img src="img/c3.png" style="display:box; width:125px;margin-left:5px;margin-top:9px" />    .
        .
        .
    </div>
</div>

CSS:

#container{margin-left: auto;margin-right:auto;width:1200px;}

Take a look on http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally — Mihai8, Mar 09 '13 at 11:58
Do a [jsfiddle](http://jsfiddle.net) and rephrase your question please. — soyuka, Mar 09 '13 at 12:01
it seems to be working http://jsfiddle.net/arunpjohny/BCCWk/2/ i reduced the width to 200px so that it will fir to the screen ib fidde — Arun P Johny, Mar 09 '13 at 12:03
If you want the images on a single line, you can use float:left; on the images — Mark, Mar 09 '13 at 12:10
i need it horizontally in a single line and to center of screen.the code in js fiddle changes with screen resolution. Here is the jsfiddle http://jsfiddle.net/viru48/VYBFF/ — viru48, Mar 09 '13 at 12:18

score 2 · Accepted Answer · answered Mar 09 '13 at 14:14

Here, your improved CSS

Here the images will behave as text so this code is perfect for your requirement. (If something doesn't work out as you want, just leave a jsfiddle of your HTML and CSS so that we can se the live code.)

#container {
    position: relative;
    margin: auto;
    width:1200px;
}

#list img {
    display: inline-block;
}

#list {
    vertical-align: middle;
    text-align: center;
}

Place a div to center of screen according to screen resolution in every browser

1 Answers1