保證金頂=元件的jQuery

的50％I具有的div X量，都設置到一個特定的高度和寬度。在這些內部是一個圖像，大小各不相同。我想找到的圖像的高度，除以2，並設置爲距頂部值，以便所有圖像都在市中心，如果這是有道理的？香港專業教育學院試圖使提琴只有即時通訊不知道該如何去做？保證金頂=元件的jQuery

http://jsfiddle.net/R8QUL/1/

來源

2012-03-12 Liam

你可以做這樣的事情

$(document).ready(function() { 

    $('.box img').each(function() { 
     var $this = $(this); 
     var parentHeight = $this.parent().height(); 
     var thisHeight = $this.height(); 
     var topmargin = (parentHeight - thisHeight)/2; 
     $this.css("margin-top", topmargin); 
    }); 
})

小提琴這裏http://jsfiddle.net/R8QUL/6/

來源

2012-03-12 11:07:25

這可能是值得指出的是'.innerHeight（）'可能工作太，因爲這包括'padding'，並且這是盒子元素內部的可視部分。根據利亞姆似乎正在嘗試做的事情，我想這也許是需要考慮的事情。 – 2012-03-12 11:37:43

$(document).ready(function(){ 

    var boxheight = $('.box').height(); 

    $('.box img').each(function(i){ 
      var topmargin = (boxheight - $(this).height())/2 
      $(this).css("margin-top", topmargin); 
    }); 



})

直播演示

http://jsfiddle.net/R8QUL/5/

來源

2012-03-12 11:08:52 sandeep

這是我會怎麼做

$(document).ready(function(){ 
    $('.box img').each(function() { 
     $(this).css("margin-top", $(this).parent().height()/2-$(this).height()/2); 
    }); 
});

FIDDLE

來源

2012-03-12 11:10:31 adeneo

有些圖像需要一段時間來加載，因此沒有寬度或高度呢。要解決這個問題，你可以使用setTimeout。

$(document).ready(function(){ 
    $.each($('.box'), function(){ 
     centerImage($(this)); 
    }); 
}); 

function centerImage(box){ 
    var imgWidth = $(box).find('img').width();  
    var imgHeight = $(box).find('img').height(); 

    if(imgWidth > 0 && imgHeight > 0){ 
     $(box).find('img').css('margin-top', ($(box).height() - imgHeight)/2); 
    } else { 
     setTimeout(function(){ centerImage(box); }, 100); 
    }  
}

http://jsfiddle.net/7EDSF/

來源

2012-03-12 11:37:17 feskr

如果你有興趣在純CSS解決方案：http://jsfiddle.net/R8QUL/11/
只需添加

.box 
    line-height: 225px; 
} 

.box img { 
    display: inline-block; 
    vertical-align: middle; 
}

來源

2012-03-12 11:51:04 fcalderan

現在寫我也工作這個解決方案:) – sandeep 2012-03-12 11:53:38

保證金頂=元件的jQuery

回答

相關問題