<figure style="width:110px;float:left;margin:10px;text-align:center;
                    background-color:white;border:1px solid black;
                    border-radius:5px;box-shadow:1px 1px 1px 1px;padding-top:5px;">
    <img src="../images/cd100.jpg">
    <figcaption>this is image one</figcaption>
</figure>
<figure style="width:110px;float:left;margin:10px;text-align:center;
                    background-color:white;border:1px solid black;
                    border-radius:5px;box-shadow:1px 1px 1px 1px;padding-top:5px;">
    <figcaption>this is image two</figcaption>
    <img src="../images/cd100.jpg">
</figure>
<figure style="width:110px;float:left;margin:10px;text-align:center;
                    background-color:white;border:1px solid black;
                    border-radius:5px;box-shadow:1px 1px 1px 1px;padding-top:5px;">
    <img src="../images/cd100.jpg">
    <figcaption>this is image three</figcaption>
</figure>

http://coboldinosaur.com/pages/Captions_for_Lists_and_Images.html

One of the limits of using lists (ordered and unordered) is that they have no provision for a heading. You can do something like: <ul>This is a Title<li> etc... but it is invalid because the list containers can only contain List Items. One way commonly used to put a heading on a list is to put a paragraph or div ahead of the list. It is messy and ugly, but it validates.

The problem with that solution is that the elements are not bound to each other and therefore it can break unless you make it even uglier by putting a common wrapper around both elements, and then you have extra linefeeds to deal with.

Captions For Lists and Images

css, html, images

HTML