简体   繁体   中英

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.

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>

在此输入图像描述

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM