Question

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

如果所有图像都是相同的高度，我只使用margin-top:-<half the height of the image>px，但因为我不知道高度我有点卡住

Answer 1

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

Answer 2

我更喜欢css方法：

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

当然，您可以将中心改为左/右/上/下（我相信有一个中间）。没有计算或棘手的javascript / css或草率/难以理解的代码：）

Some info about background-position on W3C

Answer 3

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>

希望这有帮助。

垂直居中的图像具有不同的高度

3 个答案: