0

私は次の HTML を持っています。これは変更できますが、そのままのシンプルなままにしておくことをお勧めします。

<div class="c">
     <img ...>
</div>

画像は可変サイズで、div 内で垂直方向に中央揃えにする必要があります。現在、次の CSS を使用しています。

.c {
    width: 40px;
    height: 40px;
    overflow: hidden;
}
.c img {
    width: 40px;
    height: auto;
}

CSS で table と table-cell メソッドを使用してみましたが、overflow: hidden. position: relativeで負のtop値を使用するなどのサーバー側の方法を検討しました<img>が、必要がなければ、ページで追加のサーバー側処理を使用しないことをお勧めします。私は JavaScript を使いたくないので、それが唯一の選択肢である場合は、サーバー側で行います。
画像は常に 40x40px 以上になります。

このフィドルは、私が試みていたことを示していdisplay: tableます。

4

3 に答える 3

0

................................デモ

こんにちは、このようvertical-align:topにあなたのimg tag スローCSSに慣れています

img {
     vertical-align:top;
}

ライブデモ

于 2012-09-26T04:41:14.373 に答える
0

こちらをご覧ください: http://www.vanseodesign.com/css/vertical-centering/

最も快適に感じる方法を選択できます。

于 2012-09-26T03:52:36.160 に答える
0

古いブラウザでは画像をスケーリングせず、新しいブラウザではスケーリングし、使用するコードを大幅に減らす、より単純な方法を決定しました。この CSS を使用すると、HTML は基本的に単なる<div>タグになります。

div.image {
    background: url(IMAGE) center center no-repeat;
    background-size: cover;
}

を使用background-size: coverすると、CSS3 準拠のブラウザで div に合わせて画像を拡大縮小できますが、古いブラウザでは画像を中央に配置しますが、拡大縮小はしません。これは完璧な解決策ではありませんが、私の場合は確かに機能します。

于 2012-09-26T07:09:23.277 に答える