I have a div called "images" which has a width of 277px. Within that div I have 9 images in it, just stored as tags. I've got the images to float left and line up quite nicely within my div, but I would like the images to align vertically, as some are portrait and others are landscape. I know I can do this if I enclose each image in a div, but the plugin I use to launch the gallery won't recognise which image is being fired, so i need to enclose them as just within the tags.
This is the code I have, if someone can help me just align the images horizontally and vertically. I don't want the images to be skewed.
#images_box a
{
float:left;
padding:9px;
width: 70px;
height: 70px;
text-align: center;
vertical-align: middle;
display: table-cell;
}
my data
<div id="images">
<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>
