CSS Center Responsive DIV

Question

The "tiles" (white boxes) that you see in image 1 are responsive to the users screen. If the screen size just isn't big enough, it leaves a gap on the right hand side. What I want to do is achieve the result as seen in image 2. Here is my code so far for those specific elements..

HTML:

<div class="main">
    <div class="inner">
        <div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div>
    </div>
</div>

CSS:

.main{
    width:100%;
    background: #000;
}

.main .inner{
    margin:10px;
    min-width: 140px;
    background: red;
}

.main .inner .tile{
    margin:10px;
    height: 120px;
    width: 120px;
    background: #fff;
    display: inline-block;
}

IMAGE 1:

IMAGE 2:

Chavaree

A single layout grid isn't able to support this at present. For an explanation of why not, see this answer. But multiple layout grids of different sizes can support it, using media queries to choose the right one based on the screen size, as @axrwkr suggested. – Jiggered

Answer 1

You can do this with media queries to set the width of the .inner class at various browser widths, then set the margin-left and margin-right properties to auto to center it. Set the padding-top and padding-bottom properties of the .main class instead of setting top and bottom margins on the .inner class. Use a combination of padding on the .inner class and border on the .tile class to space the tiles out evenly 10px apart.

For a detailed description of media queries: CSS media queries

example

css

.main{
    width: 100%;
    background: #000;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main .inner{
    padding: 5px;
    font-size: 0px;
    display: table;
    margin-left: auto;
    margin-right: auto;
    background-color: red;
}

.main .inner .tile{
    margin: 0px;
    padding: 0px;
    border: 5px solid red;
    height: 120px;
    width: 120px;
    background: #fff;
    display: inline-block;
}

Set a media query for each browser width, in this example I have only gone up to 800px, but you can add as many more as you need.

css (continued)

@media (min-width: 280px) {
    .main .inner{
        width: 130px;
    }
}

@media (min-width: 320px) {
    .main .inner{
        width: 260px;
    }
}

@media (min-width: 480px) {
    .main .inner{
        width: 390px;
    }
}

@media (min-width: 640px) {
    .main .inner{
        width: 520px;
    }
}

@media (min-width: 800px) {
    .main .inner{
        width: 780px;
    }
}

The media queries are used to set the width of .inner to a multiple of 130px which is the width of a .tile with a border of 10px.

If you want to change the spacing between the tiles you would need to alter the border on the .tile class, the padding on the .inner class, the margin-top and margin-bottom on the .main class and the width that is specified in each of the media queries.

Pack

This may be the only CSS solution available at present, using media queries to choose different layout grids based on the browser width. I think it's either that or JavaScript. – Jiggered

Answer 2

   .main .inner{
  min-width: 140px;
    background: red;
    text-align:center;
    }

Add text-align:center css property http://jsfiddle.net/dolours/afKgg/

Dowdy

Is there any way to made the last row aligned left? – Chavaree

Answer 3

You could set max-width for .inner then have text-align: center for .main

Autry

Is there any way to made the last row aligned left? – Chavaree