CODEWITHSUNDEEP
htmlcss
Oskar Persson
Oskar Persson

Reputation: 6753

Vertical align the bottom of an image and the top of some text

I want to align multiple images on a line with some text below every image. The text can have multiple lines and is aligned at the center. The images can have different heights but always the same width. The bottom of the images should be at the same height and the top of the textboxes should be at the same height.

To better illustrate this:

enter image description here

Upvotes: 1

Views: 2744

Answers (4)

Romain Pellerin
Romain Pellerin

Reputation: 2470

Your ultimate solution is here. It's fully adaptable.

http://jsfiddle.net/v99yf/1/

In this example I used <p> but you can use <div>

Upvotes: 0

Mike Saull
Mike Saull

Reputation: 1427

This works for me... JsFiddle It doesn't run the js in jsfiddle but it works if you copy that to an html file.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>images</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" rel="stylesheet" href="css/site.css"/>
<script type="text/javascript">
var maxHeight;

function getMaxHeight(){
    var imgs=document.getElementsByClassName("bottomAlignedImage");

    if(imgs.length>0){
        maxHeight=imgs[0].height;
        for( var i=1; i<imgs.length; i++){
         var currImg = imgs[i];
            if(currImg.height>maxHeight)
              maxHeight = currImg.height;
              }
        }

}

function applyMarginToImages(){

    var imgs=document.getElementsByClassName("bottomAlignedImage");

    for( var i=0; i<imgs.length; i++){
        var currImg = imgs[i];
        currImg.style.marginTop = maxHeight-currImg.height;
        }
}

</script>
</head>

<body onLoad="getMaxHeight();applyMarginToImages();">
<table>
<tr id="imgRow">
    <td><img class="bottomAlignedImage" style="" src="http://dummyimage.com/100x300/000/fff"/></td>
    <td><img class="bottomAlignedImage" style="" src="http://dummyimage.com/100x100/000/fff"/></td>
    <td><img class="bottomAlignedImage" style="" src="http://dummyimage.com/100x150/000/fff"/></td>
</tr>
<tr id="imgTextRow">
<td class="center"><p>Big</p></td>
<td class="center"><p>Small</p></td>
<td class="center"><p>Medium</p></td>
</tr>
</table>
</body>
</html>

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22161

You can use a CSS table layout to achieve this: (updated to a simplified version) Working example

The trick is to stick to baseline for vertical aligning. This will create a (visual) baseline above which will display each image. Compatibility is the same as display: table, that is IE8+.

CSS:

.row {
    display: table;
    table-layout: fixed;
    border: 1px solid grey;
}
.pic {
    display: table-cell;
    padding-left: 20px;
    vertical-align: baseline;
}
.pic:first-child {
    padding-left: 0;
}
.pic img {
    vertical-align: bottom; /* only needed for removing a few pixel gap between image and paragraph */
    border: 1px solid red;
}
.pic p {
    margin: 0;
    text-align: center;
    border: 1px solid #000;
}

HTML:

<div class="row">
    <div class="pic">
        <img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
        <p>Lorem<br>ipsum</p>
    </div>
    <div class="pic">
        <img src="http://dummyimage.com/100x80/000/fff" alt="ALT">
        <p>Lorem</p>
    </div>
    <div class="pic">
        <img src="http://dummyimage.com/100x20/000/fff" alt="ALT">
        <p>Lorem<br>ipsum<br>trying to break<br>everything</p>
    </div>
    <div class="pic">
        <img src="http://dummyimage.com/100x40/000/fff" alt="ALT">
        <p>Lorem<br>ipsum</p>
    </div>
</div>

Upvotes: 3

user1467267
user1467267

Reputation:

Make the wrapping div position: relative; and then give the images this CSS:

#wrapper .img_class {
    position: absolute;
    bottom: 0px;
    left: 20px; /* variable value */
}

Upvotes: 0

Related Questions