Question

所以我有一个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;

我尝试过vertical-align：bottom，但没有成功，没有其他干净的方法将它对齐到中间（或者至少是底部的对齐？

此致

Answer 1

你可以试试这个：

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

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

Answer 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中调整它们，我会选择方形图像。如果做不到这一点，背景在大多数情况下都能正常工作。

对齐底部的图像

2 个答案: