I have a div called images_box
which has a width of 277px
. Within that div I have 9 images in it, just stored as <a>
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 <a>
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_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>
I think i figured out what you want. float: left
to get the images side by side is not necessary.
#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;
}
Works in:
Live demo: http://jsfiddle.net/vjDVp/1/