css - 垂直对齐 img

Question

我有一个名为 images_box 的 div其宽度为 277px .在那个 div 中我有 9 张图片，存储为 <a>标签。我让图像向左浮动并在我的 div 中很好地排列，但我希望图像垂直对齐，因为有些是纵向的，有些是横向的。我知道如果我将每个图像都包含在一个 div 中我可以做到这一点，但是我用来启动图库的插件无法识别正在触发哪个图像，所以我需要将它们包含在 <a> 中。标签。

这是我的代码，如果有人可以帮助我水平和垂直对齐图像。我不希望图像倾斜。

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

我的数据

<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

我想我明白你想要什么了。 float: left 并排获取图像不是必需的。

#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;
}​

工作于:

• Internet Explorer 6+
• 和现代浏览器

现场演示:http://jsfiddle.net/vjDVp/1/