Question

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

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.

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.

Hope this makes sense.

    <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

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

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

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