alignement vertical img

Question

J'ai un div appelé images_box qui a une largeur de 277px. Dans ce div j'ai 9 images dedans, juste stockées comme <a> étiquettes. J'ai les images pour flotter à gauche et aligner assez bien dans mon div, mais je voudrais que les images s'alignent verticalement, comme certains sont portrait et d'autres sont paysage. Je sais que je peux le faire si je joins chaque image dans un div, mais le plugin que j'utilise pour lancer la galerie ne reconnaîtra pas l'image qui est en train d'être déclenchée, donc je dois les placer juste dans les balises <a>.

C'est le code que j'ai, si quelqu'un peut m'aider juste à aligner les images horizontalement et verticalement. Je ne veux pas que les images soient faussées.

#images_box a { 
    float: left; 
    padding: 9px; 
    width: 70px; 
    height: 70px; 
    text-align: center; 
    vertical-align: middle; 
    display: table-cell; 
} 

mes données

<div id="images_box"> 
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg" title="morning after[explored] (mariosworld343)"> 
     <img src="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_m.jpg" alt="" /> 
    </a> 
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7234/7047458501_46a2203733_b.jpg" title="Self confined... (TVidhya)"> 
     <img src="http://farm8.staticflickr.com/7234/7047458501_46a2203733_m.jpg" alt="" /> 
    </a> 
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_b.jpg" title="kleiner schrittmacher (KatjaGiersig)"> 
     <img src="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_m.jpg" alt="" /> 
    </a> 
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_b.jpg" title="(caro diario.)"> 
     <img src="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_m.jpg" alt="" /> 
    </a> 
</div> 

Answer 1

Je pense avoir trouvé ce que vous voulez. float: left pour obtenir les images côte à côte n'est pas nécessaire.

#images_box { 
    background: #eee; 
    overflow: hidden; /* this div will get the height of the tallest element inside it */ 
    white-space: nowrap; /* prevent line-breaks */ 
} 


#images_box a { 
    padding:9px; 
    display: inline-block; /* required to apply vertical-align as expected */ 
    vertical-align: middle; 
}​ 

Travaux à:

• Internet Explorer
• et les navigateurs modernes

démonstration en direct: http://jsfiddle.net/vjDVp/1/

Answer 2

En fait, il semble que vous cherchez:

#images a { 
    padding: 9px; 
    width: 70px; 
    height: 70px; 
    text-align: center; 
    vertical-align: middle; 
    display: table-cell; 
} 

Où vous pouvez modifier le vertical-align-top ou middle, au besoin. Il n'y a pas besoin de flotteurs. Les dimensions que vous avez décrites dans votre question initiale sont éteintes, alors excuses si j'ai mal compris.

Notez également que display: table-cell n'est pas compatible IE6/7, si cela est important.

Answer 3

Définissez le css sur les images, et non sur les balises a. Donnez-leur un nom de classe (pour vous assurer que vos autres images ne sont pas affectées) et appliquez le code que vous avez fourni dans votre question (img.myclass). Ou, au moins le vertical-align.

En outre, quelles sont les tailles des images? Ont-ils tous la même largeur, la même hauteur ou une certaine taille selon qu'il s'agisse d'une image de paysage ou de portrait? Oh et je ne sais pas pourquoi, mais text-align semble parfois fonctionner sur les balises img.