javascript - 在固定高度的 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。