html - How to add text under every image?

Question

I have problem with css. How to add text My option under every image?

Here is jsfiddle DEMO: http://jsfiddle.net/Leq3R/

My css code is here:

.product_des1 {
    width: 375px;
    float: left;
    height: auto;
    overflow: hidden;
    font-size: 13px;
    line-height: 22px;
    margin-bottom: 72px;
    margin-left: 100px;
}
.product_des1:nth-child(2n+1) {
    margin-right: 0;
}
.product_des1 img {
    float: left;
    margin-right: 10px;
}
.product_des1 span {
    color: #44a6e0;
}
#all {
    width: 1034px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
}

Answer 1

If I understand correctly, you need to add the same text under every image. You can achieve this only with css by using the following code:

.product_des1:after {
    content: "My option";
    display: block;
    clear: both;
}

Here's the updated fiddle http://jsfiddle.net/Leq3R/4/

So i'm practically adding some text after the container, witch will be displayed bellow the image.

Answer 2

Like this:

Change:

.product_des1 img {
    float: left;
    margin-right: 10px;
}

To:

.product_des1 img {
    display:block;
}

Answer 3

You can use :before/:after pseudo selector to solve your problem.

I added the following css code to your code.

#all>div:before {
    content:"myOption";
    position:absolute; /* to show the content on the image */
    top:0;  /* pinning the content to top of this container */
    left:0;  /* keeping the content to left at the place of image */
}
#all>div {
    position:relative;
}

Working Fiddle