2010-03-20 8 views
1

Cela peut sembler bizarre mais j'ai un peu de CSS qui aligne mys divs. Dans un endroit j'utilise également http://www.brunildo.org/test/img_center.html qui centre les images.remove/ignore float de div externe

Maintenant, je veux que mes divs à l'intérieur d'un plus grand div pour aller à une autre ligne si celui-ci est plein. float: à gauche semble être la réponse. Le problème est qu'il ruine mon formatage. Y compris la solution dans le lien ci-dessus. J'ai ce code de test. Si j'enlève la largeur et flotte, ça a l'air bien, sauf qu'il peut prendre trop de place et ne pas aller à une autre ligne. Je pensais que je pourrais utiliser float sur un div et centrer l'image à l'intérieur. Cependant float: left le brise toujours. J'espère qu'il y a un moyen de supprimer le flotteur de sorte que chaque div va à gauche, mais la div à l'intérieur centre correctement ne pas casser mon formatage.

<style type="text/css"> 
.wraptocenter { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width: 200px; 
    height: 200px; 
    background: blue; 
} 
.wraptocenter * { 
    vertical-align: middle; 
} 
/*\*//*/ 
.wraptocenter { 
    display: block; 
} 
.wraptocenter span { 
    display: inline-block; 
    height: 100%; 
    width: 1px; 
} 
/**/ 
div.c 
{ 
background: red; 
overflow: hidden; 
min-width: 400px; 
max-width: 400px; 
} 
div.c div 
{ 
float: left; 
} 
</style> 
<!--[if lt IE 8]><style> 
.wraptocenter span { 
    display: inline-block; 
    height: 100%; 
} 
</style><![endif]--> 

<div class="c"> 
<div> 

<div> 
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div> 
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div> 
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div> 

</div></div></div> 

Répondre

0

régulière ancienne display:inline peut être utilisé sur les images elles-mêmes (ou un conteneur div). cela permettra aux éléments de circuler sur plusieurs lignes en fonction de la largeur de la div englobante.

pour centrer le div de niveau supérieur, quelque chose comme margin: 0 auto devrait le faire (si le parent a une largeur) ou le bon vieux <center> tag sinon.