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?

Answer 1

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>