将几个div水平居中对齐

Question

您好，我想知道如何将多个div水平居中对齐。目前我使用了margin: 0 auto; 让它们居中，但是divs会叠在一起而不是并排放置。你有什么解决方法吗？

这里是一个codepen链接：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;
} 

您可以看到它们重叠在一起，我想知道如何让它们并排站立。

- Athax

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>

- Alex Char

---

@Athax 很高兴能帮到你 :) - Alex Char

我会尽快给你最佳答案。 - Athax

Answer 2

你可以将它们浮动。

#rating-box .rating {
    float: left;
}

- Emre Türkiş

---

不会有帮助的，它们会失去它们的中心。 - Athax

Answer 3

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

- bklups

---

请考虑在您的答案中添加更多细节。 - Shamas S

为你提供的答案添加更多细节。 - silwar