图像未在 div 内对齐答案

【问题标题】：Image not aligning inside div图像未在 div 内对齐
【发布时间】：2012-08-13 10:53:15
【问题描述】：

当我在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>

【问题讨论】：

标签： html css vertical-alignment

【解决方案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 160 像素
更改标记，以便将每个图像输出为 background-image 内联在 <a /> 标记上。这很容易中心（当然你需要确定你的图像尺寸 - background-size 支持更差）
使用 javascript 解决方案（我看到你在<head /> 中有 jQuery 已经）

希望有帮助！

【讨论】：

通过一些选项延长了我的答案。如果您想特别追求任何一个，请告诉我
我设法使用 jQuery 让它工作，我将把那部分代码添加到基本问题中
我会将您的解决方案标记为正确，因为它也有效且具有创造性，因为我们不需要为此使用 jQuery
太好了，感谢您发布您使用的 jQuery - 很有帮助！ :)

【解决方案2】：

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

【讨论】：

您可以通过单击 jsFiddle 中的“信息”并通过 DTD 下拉列表进行更改来更改文档类型。