0

So I have a space for images of 120x120, it's for thumbnails, based specially in width. It's a div that contains the image, that links to an article

I have an image of 120x57 but it stays at the top of the div, letting quite too much space from the text on the next 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>

The css for it:

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

I've tried with vertical-align:bottom, but no success, there is no other clean way to align it to the middle (or to the bottom at least of the ?

Regards

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>

最も簡単で確実な方法の 1 つは、正方形の画像を作成し、必要に応じてパディングすることです。ただし、画像を準備するには、手作業または追加のスクリプトが必要です。

それからテーブルがありますが、まあ、テーブルです...

便利な画像ジェネレーターがある場合、または Photoshop で自分で調整するサムネイルが多すぎない場合は、正方形の画像を使用します。そうしないと、バックグラウンドはほとんどの状況で問題なく機能します。

于 2013-01-26T00:41:50.107 に答える