在底部对齐图像答案

【问题标题】：Aligning image at the bottom of在底部对齐图像
【发布时间】：2013-01-26 08:41:50
【问题描述】：

所以我有一个 120x120 的图像空间，它用于缩略图，特别是在宽度上。这是一个包含图片的 div，链接到文章

我有一个 120x57 的图像，但它停留在 div 的顶部，在下一个 div 上留出太多空间

<div class="thumb">
<a href="http://link.com"><img src="http://link.com/media/thumb.png" border="0" alt="thumb" title="thumb" class="thumblist"></a>
</div>

它的 css：

margin: 8px 0;
width: auto;
height: 120px;
overflow: hidden;

我尝试过垂直对齐：底部，但没有成功，没有其他干净的方法可以将其对齐到中间（或至少对齐到底部？

问候

【问题讨论】：

CSS 有什么用？ img、div、a?

标签： image css

【解决方案1】：

你可以试试这个：

.thumb {
   margin: 8px 0;
   width: auto;
   height: 120px;
   overflow: hidden;

   display:table-cell;
   vertical-align:bottom;
}

【讨论】：

别忘了在.thumb的父级上设置display:table。

【解决方案2】：

我能想到几种方法，但没有一个特别优雅。

在背景中设置图像是最快的，但无法选择或打印图像（使用默认打印设置）。（为了清楚起见，样式是内联的。）

<a href="#" style="display: block; width: 120px; height: 120px;
    background: url(thumb.jpg) bottom no-repeat;"></a>

绝对定位是一种有效的选择，但也有其问题。

<a href="#" style="display: block; width: 120px; height: 120px; position: relative;">
<img src="thumb.jpg" style="display: block; position: absolute; bottom: 0px; left: 0px; width: 120px;" /></a>

最简单、最可靠的方法之一就是制作一个方形图像，并根据需要进行填充。但是，它涉及手动工作或额外的脚本来准备图像。

然后是桌子，但是，是桌子……

如果有方便的图像生成器或者没有太多缩略图可以自己在 Photoshop 中调整它们，我会选择方形图像。否则，背景在大多数情况下都可以正常工作。

【讨论】：