Vertical aligning images with fixed div height

I have searched the knowledge base high and low but nothing gives me results.

I've attached the screenshot and content code I'm working on below, but I need to do vertical alignment of the images based on the height of the div created by the tallest image.

So, a few things. Fixed container height. One edition is determined by the highest image size - can I do this with JS?

Then, once the height is determined, the images are vertically aligned 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>

      

enter image description here

0


source to share


1 answer


I see many answers already, but I am still posting this because I wasted time using placekittens ..

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



Basically, I used vertical-align: middle

. I have used inline-block

.

+2


source







All Articles