html - 居中内联 block

Question

所以我们有一个容器，红色边框，包含一堆小的内联 block 元素，绿色边框。它看起来或多或少是我想要的。

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>

当您缩小页面时，我的问题会变得更加明显。

这些元素都向左浮动，而我更希望它们居中。

非常简单的问题。我如何在容器中将它们居中？

Answer 1

将以下内容添加到 .featureBoxContainer 怎么样

text-align: center;

我还建议你看看 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>