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/

Answer 2

基本上，您似乎在寻找：

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

您可以根据需要调整vertical-align到top或middle的位置。不需要花车。您在原始问题中描述的维度是关闭的，如果我误解了，请道歉。

另请注意display: table-cell对IE6 / 7不友好，如果重要的话。

Answer 3

将css设置为图像，而不是a标记。给他们一个类名（以确保您的其他图像不受影响）并将您在问题中提供的代码应用于该代码（img.myclass）。或者，至少是vertical-align。

此外，图像的大小是多少？它们是否具有相同的宽度，相同的高度或一定的大小，具体取决于它是横向还是纵向图像？

哦，我不知道为什么，但text-align似乎也有时会对img标签起作用。

垂直对齐img

3 个答案: