2

DIV当我在jsFiddle上执行此操作时，我能够在中间垂直对齐图像，但是当我在网站上执行此操作时，它似乎与某些我无法找到的 CSS 冲突。

我使用与 jsFiddle示例相同的 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>
4

2 回答 2

4

如果您切换 jsFiddle DOCTYPE 以匹配您的网站，图像将再次对齐到顶部（您可以在左侧的信息面板中执行此操作）。

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

回复第一条评论

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

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

其他选项可能包括：

  • 使您的图像为160 x 160 像素
  • 更改标记，以便将每个图像作为 标签background-image上的内联输出。<a />这很容易居中（当然你需要确定你的图像尺寸 - background-size支持更不支持）
  • 使用 javascript 解决方案（我看到你已经有了 jQuery <head /> ）

希望有帮助！

于 2012-08-13T11:01:41.077 回答
0

我相信这是因为实际网站使用 XHTML 过渡文档类型，而 JS fiddle 使用 HTML5 (html) 文档类型。

于 2012-08-13T11:06:36.777 回答