0

jQuery を使用して、各画像のサイズが異なる場合に、特定の div で画像を垂直方向に中央揃えにするスタイルを追加するにはどうすればよいですか?

すべての画像が同じ高さの場合はそのまま使用しますmargin-top:-<half the height of the image>pxが、高さがわからないため、少し行き詰まっています

4

3 に答える 3

0

2 つの解決策: - 高さの寸法を img タグ内に配置する - すべての画像が読み込まれたら、サイズ変更関数を呼び出す画像ローダーを作成する

于 2013-07-24T09:34:14.860 に答える
0 
vertical-align:middle;

あなたがしたいことをします。

ここではcssメソッドを使用して、

http://jsfiddle.net/m8mNf/4/

ここでは jQuery メソッドを使用して、

http://jsfiddle.net/cq2S8/351/

jqueryを使った例。

<html>
<head>
<title>Center my iamges</title>
<style>
body {
    padding:0;margin:0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
    $("img").css('vertical-align','middle');
});
</script>
</head>
<body>
<div>
    Hello
    <img src="http://images2.fanpop.com/image/photos/13900000/The-Rose-of-Love-roses-13967150-1024-768.jpg" width="60" height="50">
    <img src="http://images2.fanpop.com/image/photos/13900000/The-Rose-of-Love-roses-13967150-1024-768.jpg" width="60" height="80">
</div>
</body>
</html>

お役に立てれば。

于 2013-07-24T10:44:37.603 に答える
0

私はcssメソッドを好みます：

#item{
    background: url('some/url/img.jpg') center center;
}

もちろん、中心を左/右/上/下に変更できます（中央があると思います）。計算やトリッキーなjavascript / css、またはずさんな/理解しにくいコードはありません:)

W3C の background-position に関する情報

于 2013-07-24T09:54:42.090 に答える