Inline images with captions centered under each?

Question

How would I display multiple images on the same line, and put captions centered under each one using HTML/CSS?

Here's what I currently have:

HTML:

<div class="iconbox">
       <div id="tut-icon"><p><img src="images/tuticon.png" alt="Written Tutorials" />Some text</p></div>
       <div id="vid-icon"><p><img src="images/vidicon.png" alt="Video Tutorials" />Some text</p></div>
       <div id="add-icon"><p><img src="images/addtuticon.png" alt="Add Tutorials" />Some text</p></div>
</div>

CSS:

.iconbox {
height: 128px;
padding: 20px;
display: inline;
}

#tut-icon, #vid-icon, #add-icon {
text-align: center;
width: 128px;
}

#tut-icon img, #vid-icon img, #add-icon img {
display: inline-block;
}

Here's a JSFiddle for the code: http://jsfiddle.net/swiftsly/24m7L/

Look at this question http://stackoverflow.com/q/10128950/1741542 — Olaf Dietsche, Oct 28 '13 at 22:09

score 3 · Accepted Answer · edited May 23 '17 at 11:50

Something like this would work:

HTML:

<div class="iconbox">
    <div id="tut-icon">
        <img src="images/tuticon.png" alt="Written Tutorials" />
        <p>Some text</p>
    </div>
    <div id="vid-icon">
        <img src="images/vidicon.png" alt="Video Tutorials" />
        <p>Some text</p>
    </div>
    <div id="add-icon">
        <img src="images/addtuticon.png" alt="Add Tutorials" />
        <p>Some text</p>
    </div>
</div>

CSS:

.iconbox {
    height: 128px;
    padding: 20px;
}
.iconbox > div {
    text-align: center;
    width: 128px;
    display: inline-block;
}
.iconbox p {
    margin: 0;
}

DEMO

or

.iconbox {
    height: 128px;
    padding: 20px;
}
.iconbox > div {
    text-align: center;
    width: 128px;
    float: left;
}
.iconbox p {
    margin: 0;
}

DEMO

(after the float you would then probably want to apply a clearfix)

Thanks, works well. Just moved the "text-align: center;" tag to the ".iconbox p" section to center the text. — swiftsly, Oct 28 '13 at 22:25
to have the image and the text centered you should leave the `text-align` property on the `div` elements (it then anyway gets inherited). — Martin Turjak, Oct 28 '13 at 22:28

score 1 · Answer 2 · answered Oct 28 '13 at 22:12

1

Edited your fiddle http://jsfiddle.net/24m7L/1/

Try and use classes if you find yourself copying ids everywhere.

This uses inline-block which is not working correctly IE <= 7 (http://caniuse.com/inline-block)

answered Oct 28 '13 at 22:12

TimCodes.NET

4,601
1
25
36

Inline images with captions centered under each?

2 Answers2

DEMO

DEMO