0

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

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

问候

4

2 回答 2

0

你可以试试这个：

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

   display:table-cell;
   vertical-align:bottom;
}
于 2013-01-26T00:41:43.520 回答
0

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

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

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

于 2013-01-26T00:41:50.107 回答