css - 将几个 div 水平居中

Question

你好，我想知道如何将 div 水平居中，到目前为止我使用的是 margin: 0 auto;将它们放在中间，但 div 正好在彼此下方而不是彼此相邻。关于如何解决这个问题的任何想法？

这是一个代码笔:http://codepen.io/anon/pen/KdMmPo

HTML:

<section id="rating-box">
   <div class="rating"></div>
   <div class="rating"></div>
   <div class="rating"></div>
   <div class="rating"></div>
   <div class="rating"></div>
   <div class="rating"></div>
</section>

CSS:

#rating-box {
    width: 100%;
    margin: 20px 0 20px 0;
}


#rating-box .rating {
    width: 35px;
    height: 35px;
    background-color: #7a7a7a;
    margin: 0 auto;
} 

如您所见，它们彼此重叠，我想知道如何让它们并排放置。

Answer 1

您可以对子元素使用 display: inline-block，对父元素使用 text-align: center:

#rating-box {
  width: 100%;
  margin: 20px 0 20px 0;
  text-align: center;
}
#rating-box .rating {
  width: 35px;
  height: 35px;
  background-color: #7a7a7a;
  display: inline-block;
}

<section id="rating-box">
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
</section>