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>

```