How do you left-align blocks in a container that's centered and shrinks to fit?

Question

Can this be done without media queries or javascript?

I have a set of blocks that I want to show inline and left-aligned in a shrink-to-fit container. I also want the group of them to be horizontally centered in the browser window.

CSS to center parent, left align children, and shrink-to-fit?

My first idea was:

body {
  text-align: center;     /* center the group/container */
}
.container {
  display: inline-block;  /* shrink-to-fit */
  text-align: left-align; /* left-align the blocks */
}
.block {
  display: inline-block;  /* left-align the blocks */
}

It was unsuccessful, because as soon as the blocks wrap to a new line, the container expands to 100% of the body. The result is that the group of blocks become left-aligned.

FYI: It's `text-align: left;` not `left-align` -- also can you create a [jsfiddle](http://jsfiddle.net) demo showing the result you mention? — Adrift, Mar 24 '15 at 16:02
possible duplicate of [Shrink-wrap and center a container for inline-block elements](http://stackoverflow.com/questions/8684793/shrink-wrap-and-center-a-container-for-inline-block-elements) — Paulie_D, Mar 24 '15 at 16:05
also duplicate: http://stackoverflow.com/questions/26181090/center-floated-child-divs-in-a-parent-div-that-has-fluid-width/26181316#26181316 and http://stackoverflow.com/questions/28876653/css-centering-dynamic-div/28876722#answer-28876722 — Pete, Mar 24 '15 at 16:12
None of those answered the question. They all say it's not possible without media queries or javascript. But this guy has a solution: http://stackoverflow.com/questions/8947776/how-do-i-create-a-centered-div-of-uncertain-width-containing-left-aligned-elemen?rq=1 — Mike M. Lin, Mar 24 '15 at 16:46

score 2 · Accepted Answer · answered Mar 24 '15 at 19:32

Here's one [imperfect] solution. You can add invisible placeholders to the end of your inline blocks. That will left-align the last row.

http://jsfiddle.net/aakt65x4/

However, if you don't fill up the first row, the entire thing will appear left-aligned.

HTML:

<!--
  Centers a group of boxes that wrap to the width of its container.
  Also left-aligns them inside the container.
  Issue: Does not center group if there aren't enough boxes to fill
  the first row.
  -->
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>

    <!--
      How many placeholders do you need?
      At least the number of blocks minus two.
      -->
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
</div>

CSS:

body {
    text-align: center;     /* center a max-width container */
    font-size: 0;           /* remove spaces between blocks */
}
.container {                /* you don't need this */
    background-color: #eee; /* so you can see what's happening */
    max-width: 960px;       /* to demonstrate the centering of a max-width container */
    display: inline-block;  /* center the max-width container */
    text-align: center;     /* center the group of blocks */
}
.block {
    display: inline-block;  /* left-align within the group */
    background-color: red;  /* so you can see what's happening */
    height: 100px;
    width: 100px;
    margin: 10px;
}
.placeholder {
    display: inline-block;  /* add to the line of blocks */
    width: 120px;           /* width + margin of a block */
}

Makan · Answer 2 · 2015-03-24T18:17:24.207

0

Try this:

body{ 
    width: 100%;
    text-align: center;         
}

.container{
    max-width: 80%;
    display: inline-block;
}

.block{
    float: left;
}

edited Mar 24 '15 at 18:17

answered Mar 24 '15 at 16:18

Makan

547
6
8

Thanks for the reply. In this case, the width of the container is determined by the window. If the width is slightly wider than a row of blocks, then the group of blocks will show slightly left of center. Do you see what I mean? – Mike M. Lin Mar 24 '15 at 16:34
Yes, I see what you say. Try the updated answer. It should work. Also add width, height and margin for '.block' as you need. – Makan Mar 24 '15 at 17:13
Thanks, but this has the same problem as your original solution. Check it out: http://jsfiddle.net/aakt65x4/1/ – Mike M. Lin Mar 24 '15 at 19:47
Oh sorry, now I understand what you mean. Pictures in your question were confusing. I do not know if it is doable just with CSS and without media query. Also the answer that you posted is not a responsive design. You are just hard coding invisible blocks. It is doable with javascript/jquery, but not plain CSS without media query. – Makan Mar 24 '15 at 21:01

How do you left-align blocks in a container that's centered and shrinks to fit?

2 Answers2