Центрирование пары divs вместе горизонтально

Question

Привет, я задавался вопросом, как я смогу центрировать divs вместе горизонтально, пока я использовал 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; 
} 

Как вы видите, что они находятся на вершине друг друга, я хотел бы знать, как сделать они стоят рядом друг с другом.

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>

Answer 2

Вы можете просто плавать их.

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

Answer 3

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