Les divs centraux qui sont flottants à gauche?

Je veux centrer divs, quelque chose comme:Les divs centraux qui sont flottants à gauche?

<div style='width:100%;'> 

    <div style='float:left; width=40px; height=40px;'></div> 
    <div style='float:left; width=40px; height=40px;'></div> 
    <div style='float:left; width=40px; height=40px;'></div> 
    ... 

</div>

Pendant que je veux que les enfants divs à flottaient de sorte qu'ils apparaissent sur la même ligne, je les aime à centrer dans la ligne horizontale. Au fur et à mesure que d'autres divs sont ajoutés, ils devront éventuellement passer sur une autre ligne, ce qui est bien. Mais j'aimerais que ces articles soient centrés aussi. Quelque chose comme:

|     | 
| X X X X X X | 
|  X X  |

donc dans les divs enfants ci-dessus, assez, on a ajouté que la première ligne est complètement plein, alors les deux plus supplémentaires envelopper sur une autre ligne, mais se faire trop centrée.

Quel est le bon style à appliquer ici?

Merci

Source

2010-08-04 user246114

: ressorts inline-block' à l'esprit, mais je ne suis pas sûr de savoir comment le centrage fonctionnerait dans ce cas. – You

Pour commencer, vous devez utiliser des guillemets doubles, et non des guillemets simples, pour délimiter les valeurs d'attribut HTML. Et vos styles en ligne utilisent '=' plutôt que ':' ... –

Essayez de définir le haut div (avec une largeur: 100%;) avoir text-align: center; puis donnez à chaque div un affichage: inline-block; et marge: auto;

Cela fonctionnera en chrome, opéra, FF mais pas explorateur.

IE ne supporte que inline-block pour les éléments inline, afin de le faire fonctionner dans IE faire les divs internes portées,

comme cet affichage `

<div style="width:100%;text-align:center;"> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
    <span style="margin:auto;background-color:red;width:100px;height:50px;display:inline-block;margin-bottom:5px;">&nbsp;</span> 
</div>

Source

2010-08-04 20:15:19 Sruly

Les divs centraux qui sont flottants à gauche?

Répondre

Questions connexes