在固定高度div中垂直对齐图像 [英] Vertically aligning images in a fixed height div

问题描述

我搜索了很多基础知识，但似乎没有任何结果.

I have searched the knowledge base high and low, but nothing seems to give me a result.

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

I have attached a screenshot and code of the content I'm working on below, but what I'm needing to do is vertically align the images based on the height of the div created by the tallest image.

那么，几件事.容器的固定高度.one版本由最高的图像尺寸决定-我可以使用JS吗?

So, a few things. The fixed height of the container .one-edition is determined by the tallest image size - can I do this with JS?

然后，确定高度后，图像将在中间垂直对齐.

Then, once the height is determined, the images are aligned vertically in the middle.

希望这是有道理的.

    <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>

推荐答案

我已经看到了很多答案，但我仍在发布此答案，因为我花了很多时间来使用Placekitten..

I see many answers already but I'm still posting this, because I spent time using placekittens..

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

基本上，我使用的是vertical-align: middle.我虽然使用了inline-block.

Basically, I used vertical-align: middle. I used inline-block though.

这篇关于在固定高度div中垂直对齐图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！