Centering inline blocks

Question

So we've got a container, bordered in red, containing a bunch of little inline block elements, bordered in green. It looks to be, more or less, what I want.

HTML:

 .featuredBoxContainer {
    max-width: 1780px;
    max-height: 468px;
    border: 1px solid red;
    margin-right: auto;
    margin-left: auto;
    overflow:hidden;
    }
    .featuredBox {
      display: inline-block;
      width: 200px;
      height: 130px;
      margin: 10px;
      border: 1px solid green;  
    }

<div class="featuredBoxContainer">
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div> 
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>
            <div class="featuredBox"></div>             
        </div>

My problem becomes more apparent when you shrink the page.

These elements are all floating left, whereas I'd prefer them to be centered.

Pretty straight forward question. How do I center these within the container?

Media queries. Here's some background and potential solutions (the answer may appear unrelated until you're half way in): http://stackoverflow.com/a/32811002/3597276 — Michael Benjamin, May 12 '16 at 00:52
I did think of media queries at first, but then again I had kinda hoped there was a more intuitive/easier way to do it. Thanks for the fiddle. — Felix, May 12 '16 at 01:14

score 4 · Accepted Answer · answered May 12 '16 at 00:59

How about just adding to .featureBoxContainer the following

text-align: center;

I also suggest you take a look at CSS3 flex

http://www.w3schools.com/css/css3_flexbox.asp

.featuredBoxContainer {
  max-width: 1780px;
  max-height: 468px;
  border: 1px solid red;
  overflow:hidden;
  text-align: center;
}
.featuredBox {
  display: inline-block;
  width: 200px;
  height: 130px;
  margin: 10px;
  border: 1px solid green;  
}

<div class="featuredBoxContainer">
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div> 
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>             
</div>

I did try to add text-align:center; at first. Problem is, it comes out like this. http://i.imgur.com/CKNJpFi.png Always more whitespace on the left. Might be there's a way I could fix that. — Felix, May 12 '16 at 01:06
This is pretty weird as this behavior is not happening with the snippet. Is there any other HTML/CSS that could be involved? — j3ff, May 12 '16 at 01:14
@FelixMaxime It is because you have a margin on the left of the first element. — Francisco Romero, May 12 '16 at 01:20
Figured out why it was doing that! While I was playing around with it, I had tried switching the container/elements into ul/list items. ULs have a natural margin on the left. Everything works now. Thanks! — Felix, May 12 '16 at 01:30

score 0 · Answer 2 · answered May 12 '16 at 03:20

If you're only supporting modern browsers, flexbox is an option. On the container, you need a display:flex;, a justify-content:center, and a flex-wrap:wrap. For broader support, vendor prefixes would be needed.

.featuredBoxContainer {
  max-width: 1780px;
  max-height: 468px;
  border: 1px solid red;
  margin:0 auto;
  overflow:hidden;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
.featuredBox {
  display: inline-block;
  width: 200px;
  height: 130px;
  margin: 10px;
  border: 1px solid green;  
}

<div class="featuredBoxContainer">
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div> 
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>
  <div class="featuredBox"></div>             
</div>

Centering inline blocks

2 Answers2