垂直对齐 img答案

【问题标题】：vertical align img垂直对齐 img
【发布时间】：2012-06-19 11:37:43
【问题描述】：

我有一个名为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>

【问题讨论】：

您是在寻找围绕中心线的垂直居中而不考虑图像高度，还是垂直对齐到顶部？
尝试添加line-height: 70px。也清理一下你的问题。你的 html 说 images 和你的 css imagesbox。此外，您的 html 中的图像也远大于 70 像素。
嗨，汤姆，是的，这正是我想要做的。 Gerben，谢谢，更新了原始帖子 - 添加了您的建议，但我的图片仍然是顶部对齐的。

标签： css image alignment vertical-alignment

【解决方案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/

【讨论】：

感谢 top-trois，您的解决方案非常有效，解决了我遇到的问题。我很惊讶你不需要 float:left - 认为这是让图片在我的 div 中正确流动的唯一方法，但显然不是。再次感谢:)

【解决方案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，如果这很重要的话。

【讨论】：

嗨汤姆，这正是我想要的，虽然图像不包含在我的 div 中。所以我添加了一个 float:left，图像在顶部而不是中心对齐。

【解决方案3】：

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

另外，图片的尺寸是多少？根据是横向还是纵向图像，它们是否都具有相同的宽度、相同的高度或特定的尺寸？

哦，我不知道为什么，但text-align 似乎有时也适用于 img 标签。

【讨论】：