DIV中的垂直對齊圖像

Question

我有一個非常小的問題，我認為可以通過重新思考我的CSS來解決。

在頁面的一部分，我有一系列的圖像。 最初，每個圖像都是隱藏的（參見下面的CSS）。 我做得很好。 頁面加載時，第一個圖像通過jquery淡入。 設置了一個計時器，在X秒后，當前圖像淡出，下一個淡入。

每個圖像都包含在較大的DIV中。 圖像應該恰好位於div的中間（垂直和水平）。 由於每個圖像可能是不同的大小，我必須寫一些邏輯來檢查圖像的高度並動態調整其邊距（再次，請參閱下面的代碼）。 除了第一張圖片外，這種方法很好。 第一個圖像的計算高度始終為0 ...這使得它看起來低於div的中間。

使用垂直對齊可以實現相同的效果嗎？ 到目前為止，我一直沒有成功。

任何幫助深表感謝。

謝謝

碼

標記

    <div id="logowrapper">
        <div class="logo">
            <img src="" />
        </div>
        <div class="logo">
            <img src="" />
        </div>
        <div class="logo">
            <img src="" />
        </div>
    </div>

CSS

#logowrapper
{
    border-right: 2px solid #DDD;
    display: block;
    position: absolute;
    top: 12px;
    left: 10px;
    text-align: center;
    width: 370px;
    height: 208px;
    background-color: #FFF;
}
.logo
{
    display: none;
}

JS

$(document).ready(function() {
    var currentLogo = 0;
    var numLogos = $(".logo").size();
    var interval = 3000; 
    var boxHeight = $("#logowrapper").height();
    function updateLogo() {
        if (currentLogo >= numLogos) {
            currentLogo = 0;
        }


        $(".logo").hide();  
        var thisLogo = $(".logo:eq(" + currentLogo + ")");
        thisLogo.fadeIn();
        var logoHeight = thisLogo.height();

        var newMargin = parseInt((boxHeight / 2), 10) - parseInt((logoHeight / 2), 10);

        thisLogo.css({ marginTop: newMargin });

        currentLogo++;

    }
    setInterval(updateLogo, interval);
    updateLogo();


});

Answer 1

當你試圖獲得它的高度時，第一張圖片可能沒有加載。 其他的工作是因為當你到達那些時，它們完全被裝載。

您可以使用load的事件，而不是ready等待加載圖像。 使用jQuery：

$(window).load(function() {
    ...
});

我認為您可以使用"#logowrapper"而不是window來等待包裝器中的圖像加載，但我從來沒有這樣做過。

Answer 2

div中的垂直線圖像正在處理chrome和safari。

屬性是：

<div class="image-wrap">
<img src="xyz.png"/>
</div>


.image-wrap {
display:table-cell;
width:400px;
vertical-align:middle;
}

Answer 3

我認為vertical-align僅適用於內聯元素。 例如，請參閱此文章 。 嘗試更改display: block; display: inline;

編輯：或者，如果不起作用，請直接在圖像標記上設置vertical-align

Answer 4

顯示該項目，檢查其高度並再次隱藏它。 jQuery沒有很好地測量隱藏元素。 這將很快發生，用戶將無法看到它。

Answer 5

這是否是基於網絡工具箱的瀏覽器（chrome，safari）發生的任何機會？

如果是，你可以使用$(window).load(function()而不是$(document).ready(function()因為問題可能是因為圖像尚未加載而未知高度。