圖像不對齊內部div

我能夠對齊圖像在中間垂直內DIV當我這樣做jsFiddle但同樣不工作時，我在網站上它似乎是與一些CSS，我不能夠定位。圖像不對齊內部div

我正在使用相同的CSS，我用於jsFiddle example，在實際的網站標識總是排在最前面的位置。

我很感謝在這方面的幫助。

解決方案

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

來源

2012-08-13 Learning

如果您切換的jsfiddle DOCTYPE，以配合您的網站的圖片再次頂端對齊（你可以在信息面板左側做到這一點）。

考慮到這一點，你可以檢查這個答案：Vertical-align not working with XHTML 1.0 Transitional doctype?

迴應的第一個評論

那麼做的是改變了DOCTYPE最簡單的事情。如果你不能這樣做，那麼你需要完全找到另一種方法。垂直對齊最適合表格，因此您可以將display的道具更改爲基於表格。這裏是一個例子：http://jsfiddle.net/64UnS/1/

我不知道你是否能夠實現這一點 - 瀏覽器支持各不相同。當然你已經在使用display: inline-block;了，我沒有看到IE7的後備，所以也許這對你很好。

其他選項可能包括：

讓您的圖像160×160像素
改變的標記，使得每個圖像作爲 background-image內嵌在<a />標籤輸出。這是那麼容易中心（當然你需要確保你的圖像尺寸 - background-size支持甚至更少很好的支持）
使用JavaScript的解決方案（我看你甲肝的jQuery在<head /> 已經）

希望有幫助！

來源

2012-08-13 11:01:41 lnrbob

所以是他們的方式.. – Learning 2012-08-13 16:06:20

加長了我的答案與一些選項。讓我知道如果你想追求任何一個 – lnrbob 2012-08-13 21:24:05

我設法讓它使用jQuery工作，我會將這部分代碼添加到基本問題 – Learning 2012-08-14 04:23:45

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

來源

2012-08-13 11:06:36

您可以通過單擊jsFiddle中的'Info'並通過DTD下拉列表更改它來更改文檔類型。 – 2012-08-13 11:32:30

圖像不對齊內部div

回答

相關問題