Vertically aligning images in a fixed height div

烂漫一生 提交于 2019-12-12 05:14:08

问题


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>


回答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.



来源:https://stackoverflow.com/questions/9070632/vertically-aligning-images-in-a-fixed-height-div

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!