Variable flottante Nombre de DIV au centre

Question

J'ai défini deux classes CSS qui définissent l'arrière-plan d'une image (illustré ci-dessous). L'un est un bloc jaune et l'autre est un bloc gris.

.block-gray { background: url('grey.gif'); width: 15px; height: 3px; } 

.block-yellow { background: url('yellow.gif'); width: 15px; height: 3px; } 

---

Ce que je veux être en mesure de le faire est de définir un nombre variable de DIV en utilisant l'une des classes ci-dessus, et de les horizontalement empilé, et centré dans un plus grand conteneur.

Donc, si je définissais 3 blocs comme ceci:

<div> 
    <!-- The # of these is variable, and not necessarily fixed at 3 --> 
    <div class="block-yellow"></div> 
    <div class="block-yellow"></div> 
    <div class="block-grey"></div> 
<div> 

alors je les voudrais centrées dans le div extérieur, peu importe combien de divs intérieur il y a. Je peux utiliser float: gauche pour les empiler horizontalement, mais je ne suis pas sûr de savoir comment les garder centrés.

|                     |

Des idées?

Merci.

Answer 1

.container { text-align: center; } 
.block-yellow { display: inline-block; } 

et vous pouvez réinitialiser ce texte-align:

.block-yellow { text-align: left; } 

Answer 2

bien, n'utilisez pas float: left; à la place, utiliser l'affichage: bloc et régler la div externe sous forme de texte-align: center