Centre div flotta articles

Question

J'ai:

#content { width: 100%;text-align:center; } 
.item { float:left;} 

Et puis

...

<div id="content"> 
    <div class="item"><img /><br />wordsn</div> 
    <div class="item"><img /><br />stuff</div> 
    <div class="item"><img /><br />asdasdasdn</div> 
    <div class="item"><img /><br />Dhdfrhwon</div> 
    <div class="item"><img /><br />sewfafdion</div> 
</div> 

...

Je veux centrer ces éléments images dans la div et faites-les flotter l'un à côté de l'autre, et faites-le bien. Ne fonctionne pas

J'ai tout essayé et ça marche dans IE et casse dans Firefox donc je bidouille un peu plus de merde puis ça casse en IE. Je suis PHP besoin CSS.

Answer 1

.item { width: 400px; margin: auto 0; } 

Vous devez spécifier une largeur pour pouvoir calculer les marges appropriées.

Answer 2

Débarrassez-vous de float et commencez à utiliser display: inline pour les div item.

Ensuite, vous pouvez donner content un text-align: center - devrait fonctionner. Semblablement, sémantiquement, une telle structure pourrait mieux fonctionner - en fonction de ce que représentent ces divs, bien sûr.

<ul id="content"> 
    <li><img />wordsn</li> 
    <li><img />stuff</li> 
    <li><img />asdasdasdn</li> 
    <li><img />Dhdfrhwon</li> 
    <li><img />sewfafdion</li> 
</ul> 

Answer 3

Est-ce le genre de chose que vous essayez d'accomplir? (Vous devrez redimensionner la page pour voir l'effet d'enveloppement)

djgdesign.co.uk

Answer 4

Ok ce que je suis arrivé à travailler sur tous les navigateurs:

#content { 
text-align:center; 
} 

.item { 
    display: -moz-inline-box; 
    display:inline-block; 
} 

* html .item { display:inline; } /* for IE 6? */ 
* + html .item { display:inline; } /* for IE 7? */ 

modifier: largeur non requis

Answer 5

#content .item{width:200px;margin:0 auto}