当我在 jsFiddle 上执行此操作时，我能够在 DIV 内垂直中间对齐图像。但当我在网站上执行此操作时，同样不起作用，它似乎与我无法找到的某些 CSS 冲突。
我使用与 jsFiddle example 相同的 CSS ，在实际网站上 Logo 始终与顶部位置对齐。
非常感谢您在这方面的帮助。
解决方案
<script type="text/javascript">
$(document).ready(function () {
var h = $("#BannerSlider").height();
$.map($("#BannerSlider img"), function (e) {
var top = (h - $(e).height()) / 2;
$(e).css("margin-top", top);
});
});
</script>
<title></title>
<style>
.SponsorLogos
{
width:600px;
margin-top:50px;
margin-left:60px;
min-height:550px;
background:red;
}
.SponsorLogoWrapper
{
width:160px;
height:160px;
margin-right:30px;
margin-bottom:30px;
border:1px solid #78AC1B;
line-height:160px;
text-align:center;
overflow:hidden;
float:left;
}
.SponsorLogoWrapper img
{
display: inline-block;
border:0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="SponsorLogos">
<div id="BannerSlider" class="SponsorLogoWrapper" >
<img src="http://www.nikolakis.net/liquidcarousel/images/01.jpg" width="88" height="126" alt="image"/>
</div>
<div id="BannerSlider" class="SponsorLogoWrapper" >
<img src="http://www.nikolakis.net/liquidcarousel/images/02.jpg" width="88" height="110" alt="image" />
</div>
<div id="BannerSlider" class="SponsorLogoWrapper" >
<img src="http://www.nikolakis.net/liquidcarousel/images/03.jpg" width="88" height="100" alt="image"/>
</div>
<div id="BannerSlider" class="SponsorLogoWrapper" >
<img src="http://www.nikolakis.net/liquidcarousel/images/04.jpg" width="88" height="126" alt="image"/>
</div>
<div id="BannerSlider" class="SponsorLogoWrapper" >
<img src="http://www.nikolakis.net/liquidcarousel/images/05.jpg" width="88" height="90" alt="image"/>
</div>
</div>
</div>
</form>
最佳答案
如果您切换 jsFiddle DOCTYPE 以匹配您的网站，图像将再次与顶部对齐(您可以在左侧的信息面板中执行此操作)。
考虑到这一点，您可以检查这个答案:Vertical-align not working with XHTML 1.0 Transitional doctype?
对第一条评论的回复
最简单的事情就是更改 DOCTYPE。
如果你做不到，那么你需要完全寻找另一种方法。垂直对齐最适合表格，因此您可以更改 display Prop 基于表格。这是一个示例:http://jsfiddle.net/64UnS/1/
我不知道您是否能够实现这一点 - 浏览器支持各不相同。当然你正在使用display: inline-block;已经，而且我没有看到 IE7 回退，所以也许这对你来说很好。
其他选项可能包括:
- 将图像设置为 160 x 160 像素
- 更改标记，以便将每个图像输出为
background-image内联于<a />标签。然后这很容易 中心(当然你需要确定你的图像尺寸 -background-size支持就更少了) - 使用 javascript 解决方案(我看到您在
<head />中有 jQuery) 已经)
希望有帮助!
关于html - 图像未在 div 内对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11932875/