Aligning Images In A Row With Text Below Each Image

In short, I'm trying to achieve a design similar to this: Where the white boxes are images, and the red brushes are lines of text (the top line would hold a name and underneath th

Solution 1:

Set a width on the .member elements, and float them.

jsFiddle example - it works responsively.

Notice, as pointed out in the comments, this also aligns the text at the bottom if the images are of differing demensions.

Updated CSS

#design-cast {
    position: relative;
    overflow: hidden;
}

.member {
    float: left;
    width: 31%;
    margin: 1%1%45px1%;
}

.name {
    position: absolute;
    bottom: 0px;
}

.memberimg {
    width: 100%;
    display: block;
}

Solution 2:

An inline-block solution (this way you can put the whole thing in a text-align: center container if you want):

.member {
    display: inline-block;
    width: 150px;
    height: 200px;
    vertical-align: top;
}
.name {
    display: inline;
}
.memberimg {
    width: 100%;
    display: block;
}

http://jsfiddle.net/MhRnz/2/

Solution 3:

Just what you wanted and the text is centered.

.member {
display: inline-block;
width: 150px;
height: 200px;
vertical-align: top;
text-align:center;
}
.name {
    display: inline;
}
.memberimg {
    width: 100%;
    display: block;
}

jsfiddle: http://jsfiddle.net/skoltyno/MhRnz/4/