Pictures Css diagram

Question

I want to put the horizontal pictures along line and the names below

<div class="imgages">
<img src="rock.png"/><p>Rock</p>
<img src="paper.png"/><p>Paper</p>
<img src="scissors.png" /><p>Scissors</p>
</div>

You're going to need to use some different containers. Try
title
as a layout. You can then put the divs in a container and float the inner divs so they sit next to each other — Kinnectus, Sep 01 '14 at 19:54
Use: http://stackoverflow.com/questions/1225130/how-can-i-align-text-directly-beneath-an-image as a start... — Kinnectus, Sep 01 '14 at 19:57

score 1 · Accepted Answer · edited Sep 20 '19 at 23:19

TRY - DEMO [EDITED]

For horizontal align pictures use display: inline-block;:

TRY

div.images img {
    display: inline-block;
}

Use HTML5 <figure> and <figcaption> Tags for get the names below:

Example:

<!-- Figure with figcaption -->
<figure>
    <img src="https://i.stack.imgur.com/lYeVn.png" alt="An awesome picture">    
    <figcaption><b>NAME:</b> Caption for the awesome picture</figcaption>
</figure>

Result:

An awesome picture
NAME: Caption for the awesome picture

For more info:

Mozilla MDN - <figure>

FOR BOTH:

HTML:

<div class="images">
<figure>
    <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">    
    <figcaption><b>NAME:</b> Caption picture</figcaption>
</figure>
    <figure>
    <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">    
    <figcaption><b>NAME:</b> Caption picture</figcaption>
</figure>
        <figure>
    <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">    
    <figcaption><b>NAME:</b> Caption picture</figcaption>
</figure>
</div>

CSS:

.images figure {
    display: inline-block;
}

@user3478941 I'm glad I was able to help and don't forget to - [TRY DEMO](http://jsfiddle.net/j61ugft6/1/) :) — Anonymous, Sep 01 '14 at 20:18
This is a well explained answer. However you should not be using floats for basic layout in 2014. Just make the image `display: block`. — Zaqx, Sep 01 '14 at 20:26
I’m additionally a little disappointed that you didn’t correct OP’s spelling. imgages? Seriously? — Zaqx, Sep 01 '14 at 20:28

score 0 · Answer 2 · answered Sep 01 '14 at 20:20

0

Technique without the use of float.
Use display:inline-block to align the innnerdivs containing the image in a single line and add the image and text into the inner divs.

DEMO

answered Sep 01 '14 at 20:20

Varun

870
2
10
27

Pictures Css diagram

2 Answers2

TRY - DEMO [EDITED]