<div style="text-align: center; float: left;">Éléments div alignés au centre</div>

Question

J'ai:

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

Ensuite

...

    mots
    choses
    autres mots
    Dhdfrhwon
    sewfafdion

...

Je veux centrer ces images éléments dans la div, les faire flotter côte à côte, et les faire bien s'enrouler. Ça ne fonctionne pas.

J'ai essayé tout et ça fonctionne dans IE et casse dans Firefox alors je bidouille un peu plus et ensuite ça casse dans IE. Je suis PHP j'ai besoin de CSS.

Answer 1

.item { largeur: 400px; marge: auto 0; }

Vous devez spécifier une largeur pour qu'il puisse calculer les marges appropriées.

Answer 2

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

Ensuite, vous pouvez donner à content un text-align: center - cela devrait fonctionner.

Soit dit en passant, d'un point de vue sémantique, une structure comme celle-ci pourrait fonctionner mieux - en fonction de ce que représentent ces divs, bien sûr.

    mots
    choses
    autres choses
    truc
    quelque chose

Answer 3

D'accord, voici ce que j'ai pour que ça fonctionne sur tous les navigateurs :

#content {
text-align:center;
}

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

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

modification : largeur non requise

Answer 4

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

djgdesign.co.uk

Answer 5

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