CODEWITHSUNDEEP
htmlcsscss-tables
secondubly
secondubly

Reputation: 1032

Aligning images in a row with text below each image

In short, I'm trying to achieve a design similar to this:

mock up of design

Where the white boxes are images, and the red brushes are lines of text (the top line would hold a name and underneath their specialty) but using divs has proven to be problematic as I can't get the content to line up in a proper row - I'm not too keen on using a table for something like this due to compatibility problems, so I'm hoping someone on here would be able to assist me in trying to get it to work with divs before I fall back to that.

Below is the code I have so far and a jsfiddle accompaniment.

<div id="design-cast">
     <h4>Design</h4>

    <div class="member">
        <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img src="http://i.imgur.com/zmPeyso.png" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
</div>

CSS

.member {
    display: inline;
}
.name {
    display: inline;
}
.member img {
    width: 13%;
    display: block;
}

jsfiddle

Upvotes: 3

Views: 14274

Answers (3)

AbdelElrafa
AbdelElrafa

Reputation: 891

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;
}
.member img {
    width: 100%;
    display: block;
}

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

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240878

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% 45px 1%;
}

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

.member img {
    width: 100%;
    display: block;
}

Upvotes: 5

Adam B
Adam B

Reputation: 1153

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;
}
.member img {
    width: 100%;
    display: block;
}

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

Upvotes: 0

Related Questions