圖像在div內未對齊

Question

我可以在jsFiddle上在DIV中垂直對齊中間的圖像，但是當我在網站上進行操作時卻無法正常工作，似乎與某些我找不到的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>

Answer 1

如果您切換jsFiddle DOCTYPE以匹配您的網站，則圖像會再次與頂部對齊（您可以在左側的信息面板中執行此操作）。

考慮到這一點，您可以檢查以下答案： Vertical-align不能與XHTML 1.0 Transitional doctype一起使用？

對第一條評論的回應

那么最簡單的事情就是更改DOCTYPE。 如果無法做到這一點，那么您需要完全找到另一種方法。 垂直對齊最適合表格，因此您可以將display道具更改為基於表格。 這是一個示例： http : //jsfiddle.net/64UnS/1/

我不知道您是否能夠實現-瀏覽器支持會有所不同。 當然，您正在使用display: inline-block; 已經，而且我沒有看到IE7的備用廣告，所以也許這對您來說很好。

其他選項可能包括：

使您的圖片尺寸為160 x 160px
更改標記，以使每個圖像都作為<a />標記內聯的background-image輸出。 這樣就很容易將其居中（當然，您需要確定圖像尺寸-對background-size支持就更少了）
使用JavaScript解決方案（我已經在<head />看到了jQuery了）

希望有幫助！

Answer 2

我相信這是因為實際網站使用XHTML過渡文檔類型，而JS小提琴使用HTML5（html）文檔類型。

圖像在div內未對齊

問題描述

2 個解決方案

解決方案1
4 已采納 2012-08-13 11:01:41

解決方案2
0 2012-08-13 11:06:36

圖像在div內未對齊

問題描述

2 個解決方案

解決方案1 4 已采納 2012-08-13 11:01:41

解決方案2 0 2012-08-13 11:06:36

解決方案1
4 已采納 2012-08-13 11:01:41

解決方案2
0 2012-08-13 11:06:36