JK36 JK36 - 3 months ago 7
CSS Question

vertical align img

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>

Answer

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:

  • Internet Explorer 6+
  • and modern browsers

Live demo: http://jsfiddle.net/vjDVp/1/