Question

当我在jsFiddle上执行此操作时，我可以将图像在DIV内的垂直中间对齐但是当我在网站上执行此操作时它同样不起作用它似乎与某些CSS相冲突我无法找到。

我使用的是用于jsFiddle example的相同CSS，实际网站徽标总是在顶部位置对齐。

我很感激这方面的帮助。

解决方案

<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>

Answer 1

如果您切换jsFiddle DOCTYPE以匹配您的网站，则图片会再次与顶部对齐（您可以在左侧的 info 面板中执行此操作。）

考虑到这一点，您可以查看以下答案：Vertical-align not working with XHTML 1.0 Transitional doctype?

对第一条评论的回复

最简单的方法是更改DOCTYPE。如果你不能这样做那么你需要完全找到另一种方法。垂直对齐最适合表格，因此您可以将display道具更改为基于表格。以下是一个示例：http://jsfiddle.net/64UnS/1/

我不知道你是否能够实现这一点 - 浏览器支持各不相同。当然你已经使用display: inline-block;了，我没有看到IE7的后备，所以这对你来说没问题。

其他选项可包括：

制作图片 160 x 160px
更改标记，以便将每个图像输出为 background-image标记内嵌<a />。这很容易中心（当然你需要确定你的图像尺寸 - background-size支持得到的支持甚至更少了。）
使用javascript解决方案（我在<head />看到你有jQuery jQuery 已）

希望有所帮助！

Answer 2

我相信这是因为实际网站使用XHTML过渡文档类型，而JS小提琴使用HTML5（html）文档类型。

图像未在div内部对齐

2 个答案: