1

When I started posting on stackoverflow I never thought I'd be asking a question about simple HTML layout, but here's my slice of humble pie for the day.

In this fiddle:

http://jsfiddle.net/cheolsoo/zd5fupje/

.main {text-align:center}

The thumbnails are centered in the page regardless of the page width, which I want, but the last (incomplete) row of thumbnails is also centered, which I don't want. I want the last row to be flush left with the other rows, with blank space on the right.

In this fiddle:

http://jsfiddle.net/cheolsoo/330z8bw1/

The last row is flush left with the other rows, with blank space on the right, which I want, but the whole batch of thumbnails is a bit left of center depending on the window width, which I don't want.

So, how can I SIMPLY have the whole batch of thumbnails perfectly centered but the bottom row flush left with the rest? I say "SIMPLY" in all-caps because the ugly, complicated solutions of (1) using a bunch of media queries for varying screen widths and (2) using JavaScript to put n dummy thumbnails at the end of the row, where n = (total number of thumbnails) % (number of thumbnails in one row) have occurred to me, but those solutions are ugly and complicated.

The number of thumbnails will vary, but I know it. I also know the width of the thumbnails. (They're all the same size.)

There must be some bit of CSS I can use that hasn't occurred to me...

jasper
  • 137
  • 1
  • 9
  • 6
    Duplicate of: http://stackoverflow.com/questions/19527104/center-grid-of-inline-block-elements-in-div-but-last-row-is-aligned-with-left-e?lq=1 – Pete TNT Oct 15 '14 at 09:58
  • you could add an extra div around the tumbnails, and center that one. and then inside that div you push everything to the left like the second fiddle – Goos van den Bekerom Oct 15 '14 at 09:58
  • @PeteTNT: indeed it is. Sorry-- I DID do a search before I posted! The title's much more precise on that question too. :( I'm going to try the JavaScript solution. – jasper Oct 17 '14 at 02:21

1 Answers1

0

Flexbox is fine for your problem, without JS, only CSS3

See the result on codepen : http://codepen.io/anon/pen/kFmdJ

HTML :

<ul class="flex-container">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS :

ul.flex-container {
    width: 60%;
    padding: 0;
    margin: 0 auto;
    list-style: none;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    justify-content: flex-start;

}

ul.flex-container li {
    background: tomato;
    padding: 5px;
    margin: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;

    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

You can see a complete tutorial here : http://css-tricks.com/snippets/css/a-guide-to-flexbox/

CDO
  • 131
  • 1
  • 8