Javascript 在固定高度div中垂直对齐图像

我在知识库上下搜索过，但似乎没有任何结果

我在下面附上了我正在处理的内容的截图和代码，但我需要做的是根据最高图像创建的div的高度垂直对齐图像

所以，有几件事。容器的固定高度。一个版本由最高的图像大小决定-我可以用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>

购买权

C字印刷

双曲抛物面屋盖

胶印

132Kv PL16

胶印

我们买什么

出版

---

我已经看到了很多答案，但我仍在发布这篇文章，因为我花了很多时间使用placekittens

---

基本上，我使用了

垂直对齐：中间
。我使用了
内联块
。
CSS是垂直对齐的地狱。有各种各样的黑客来实现它，但它们都有警告、限制和要求。如果有一个通用的解决方案，比如。。。说<代码>垂直对齐：中间
。。但是没有。。。W3C认为任何人都不需要垂直对齐。
vertical align:middle
应该使用
display:table cell
处理元素，因此CSS将其视为一个表，在语义上它仍然不是一个表。哈哈，可能是重复的-谢谢。工作很好，但我的一个版本是float:left，它打破了这个答案。当div浮动时，我通过将
内联块
更改为
表格单元格
来解决这个问题。