獲取高度值和定位在具有不同高度的多個元素的中心

Question

我正在創建新聞頁面，文章坐在覆蓋框中的圖像上。我有多個新聞項目帶在一個正在與scoller合作的頁面上打印。

我對定心感興趣的是無花果。

 <section> 
      <h2>{title}</h2> 
      <figure> 
       <img src="{news_image}" alt="{title}" width="718" /> 
       <figcaption> 
        {article} 
        <a href="#close" class="btn-close">X</a> 
       </figcaption> 
      </figure> 
     </section> 
     <section> 
      <h2>{title}</h2> 
      <figure> 
       <img src="{news_image}" alt="{title}" width="718" /> 
       <figcaption> 
        {article} 
        <a href="#close" class="btn-close">X</a> 
       </figcaption> 
      </figure> 
     </section> e.t.c 

我想每個IMG的高度圖，以及每個figcaption的高度內，這樣我可以在圖像完全居中。

有一個元素，我可以想像它很容易，但我的困惑是如何讓Jquery爲每個元素添加正確的值。

任何想法？

Answer 1

你應該能夠簡單地通過遍歷每個部分要做到這一點：

$('section').each(function(){ 
    var imgHeight = $(this).find('img').height(); 
    var captionHeight = $(this).find('figcaption').height(); 
    {position caption here} 
}); 

這應該讓您抓住每一個圖像的高度，並在各部分中的每個標題。

的jsfiddle這裏：http://jsfiddle.net/nQCUr/1/