0

当每个图像具有不同的尺寸时，如何使用 jQuery 添加在某个 div 中垂直居中图像的样式？

如果所有图像的高度都相同，我会使用margin-top:-<half the height of the image>px，但由于我不知道高度，所以我有点卡住了

4

3 回答 3

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 上的背景位置的一些信息

于 2013-07-24T09:54:42.090 回答
0

两种解决方案： - 将高度尺寸放在 img 标签内 - 创建一个图像加载器，一旦加载了所有图像，调用你的调整大小函数

于 2013-07-24T09:34:14.860 回答