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>
0
source to share