0

サムネイルを水平方向と垂直方向の中央に配置して、固定サイズの正方形のコンテナー内にサムネイル画像を表示したいと考えています。

height、line-heightおよびCSS プロパティを使用するvertical-alignと、ほぼ達成できますが、上部に小さなオフセットがあり (2px私の例では)、その理由を理解したいと思います。

回避策として、画像に負の上部マージンを設定できますが、可能であればそれを避けたいと思います (ブラウザー間で壊れやすくなりますか?)。-4pxまた、オフセットを相殺するために上部マージンが必要であることにも驚いてい2pxます。

ヒントはありますか？

フィドル: http://jsfiddle.net/GlauberRocha/N6Rme/

4

2 に答える 2

0

ねえ私はあなたがこれをしたいと思います

このようにulとliの境界線を削除margin -minusして追加します

ライブデモhttp://jsfiddle.net/N6Rme/5/

于 2012-06-05T11:01:08.623 に答える
0

マークアップにバグは見つかりませんでした。タイポグラフィと CSS の奇妙な問題だと思います。そのため、垂直方向のセンタリングの新しい手法を試してみることをお勧めします。

dabblet.com のオンラインデモ

ここに画像の説明を入力

css に追加:

li {
    /* … */
    position: relative;
}

li img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

このデモの主なトリックは、要素が上から下に移動する通常の流れでは、margin-top: auto がゼロに設定されることです。ただし、絶対配置された要素の場合、自由空間の同じ分布が機能し、同様に、指定された上部と下部で垂直方向に中央揃えにすることができます ( では機能しませんIE7)。

このトリックは、任意のサイズのimg.

于 2012-06-05T11:02:48.830 に答える