0

サイズが不明な画像を (水平方向と垂直方向の両方で) 中央揃えにしようとしています。この画像はコンテナーのサイズ (101x84) よりも大きい可能性があるため、 と で画像を制限する必要がmax-widthありmax-heightます。最後に、ユーザーが画像にカーソルを合わせると、コンテナの中央にアイコンが表示されるホバー状態が画像に必要です。

現在、私のコードは、画像を垂直方向に配置できないことを除いて、上記のすべての要件を満たしています。img を に変更するなど、他のガイドに従ってみましdisplay:inline-blockたが、水平方向の中央揃えが失われます。

可能であれば、絶対に必要でない限り、javascript/jQuery を使用したくありません。

http://jsfiddle.net/uNvSU/1/

4

2 に答える 2

1

コメントできないので、これを別の回答にしています。

display:table-cellIE7 ではサポートされていません。したがって、IE7 をサポートする必要がある場合は、これを追加してdisplay:table-cell機能させることができます。

<!--[if lte IE 7 ]><table><td><![endif]-->
<div>                   
 ...
</div>
<!--[if lte IE 7 ]></td></table><![endif]-->

また、JavaScript を使用しない垂直方向のセンタリングの 6 つの方法については、こちらで説明しています: http://www.vanseodesign.com/css/vertical-centering/

于 2012-12-21T05:06:18.437 に答える
1

使用してから使用してから、またはいずれかをdisplay:table-cell使用してくださいvertical-align:middlemargin:0 auto;text-align:center

それはあなたを正しくするはずです。

于 2012-12-21T04:45:56.360 に答える