垂直對齊圖像的固定高度div

Question

我已經搜索了知識庫的高低，但似乎沒有給我一個結果。

我附上了我正在處理的內容的屏幕截圖和代碼，但我需要做的是垂直對齊基於由最高圖像創建的div的高度的圖像。

所以，有幾件事。容器的固定高度.one-edition由最高的圖像尺寸決定 - 我可以用JS做這個嗎？

然後，一旦確定高度，圖像在中間垂直對齊。

希望這是有道理的。

<div class="grid_3 one-edition"> 
<a href="product-1.php"><img src="images/editions/1_Right_To_Buy_295.jpg"></a> 
     <div class="editions-info-text"> 
      <p>Right To Buy</p> 
      <p>C-type Print</p> 
     </div> 
    </div> 
    <div class="grid_3 one-edition"> 
     <a href="product-1.php"><img src="images/editions/2_Scorer_295.jpg"></a> 
     <div class="editions-info-text"> 
      <p>Hyperbolic Paraboloid Roof</p> 
      <p>Offset Print</p> 
     </div> 
    </div> 
    <div class="grid_3 one-edition"> 
     <a href="product-1.php"><img src="images/editions/3_PL16_295.jpg"></a> 
     <div class="editions-info-text"> 
      <p>132Kv PL16</p> 
      <p>Offset Print</p> 
     </div> 
    </div> 
    <div class="grid_3 one-edition"> 
     <a href="product-1.php"><img src="images/editions/4_What_We_buy_295.jpg"></a> 
     <div class="editions-info-text"> 
      <p>What We Buy</p> 
      <p>Publication</p> 
     </div> 
    </div> 

Answer 1

我看到很多答案了，不過我仍然張貼這一點，因爲我使用placekittens所花費的時間..

http://jsfiddle.net/7ybzp/6/

基本上，我用vertical-align: middle。我用inline-block。