arrange text below image - html

Question

I want to have option buttons to have image and text below image. Right now i have managed to have image but dont know how to arrange text exactly below image without disturbing alignment.
<div>
<label>
<input type="radio" name="fb" value="small" />
<img src="http://placehold.it/20x20/35d/fff&text=f">
</label>
<label>
<input type="radio" name="fb" value="big" />
<img src="http://placehold.it/40x60/35d/fff&text=f">
</label>
<label>
<input id="fb3" type="radio" name="fb" value="med" />
<img src="http://cache1.asset-cache.net/gc/120523070-dogs-gods-gettyimages.jpg?v=1&c=IWSAsset&k=2&d=de2%2btiBrzaNEk9d4xwzh%2fvq8qyKYRsuWlpI1%2f65dmsaBkiniqNTDJkrq7zrUnaC6">
</label>
</div>
<div>
<label>
<input type="radio" name="fb" value="small1" text="ss" />
<img src="http://placehold.it/20x20/35d/fff&text=f" text="sdsdsd">
</label>
<label>
<input type="radio" name="fb" value="big1" />
<img src="http://placehold.it/40x60/35d/fff&text=f">
</label>
<label>
<input id="fb3" type="radio" name="fb" value="med1" />
<img src="http://cache1.asset-cache.net/gc/120523070-dogs-gods-gettyimages.jpg?v=1&c=IWSAsset&k=2&d=de2%2btiBrzaNEk9d4xwzh%2fvq8qyKYRsuWlpI1%2f65dmsaBkiniqNTDJkrq7zrUnaC6">
</label>
</div>
Here is Fiddle .
I am looking for output something like below
Also wish to generate option button in rows and column dynamically. Any idea related on how to achieve it?

Answer 1

Just set the to display: block;
.figures span, .figures img {
display: block;
}
you can write as
<label>
<input type="radio" name="fb" value="big1" />
<img src="http://placehold.it/40x60/35d/fff&text=f">
<span>your text</span>
</label>

Answer 2

Just add this css to the page:
<Style>
label{
float:left;
height:100px;/*can be modified*/
padding:10px;/*can be modified*/
width:50px;
}
</Style>
and after every image add and then the name as below:
<img src="http://placehold.it/20x20/35d/fff&text=f"><br/>
My name
To control how many images per row there is two ways.
1 - adding div for clear:
<div style='clear:both;'></div>
2- add everything inside a div and adjust the width of this div to until your reach to the proper count of images.
add this to the main div that you have
<div id="maincontainer" style="width:100px">
I updated the css by adding width:50px which means every label will be 50px... the main container is 100 => 2 items / row.
make the width of maincontainer to 150 -> 3 item / row....

Answer 3

According to your need, you can get desired output by using <br/> tag or without tag.
With <br /> Tag
fiddle
Without <br /> Tag
fiddle
In fiddle 1 i have used <br / > tag and in second i have used display:block; on images and display:inline-block on label. So use whatever you are ok with :)

Answer 4

You could wrap your images inside a <figure> tag and use <figcaption> for your text below it. I'm not sure what you mean in regards to "option buttons" though.
http://codepen.io/partypete25/pen/KzJOyY
<figure>
<img src="image-src-url" alt="">
<figcaption>Dog</figcaption>
</figure>

Answer 5

Change your CSS with this:
label > input + img {
/* IMAGE STYLES */
cursor: pointer;
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius: 50%;
width: 50px;
height: 50px;
margin: 5px;
border: 1px solid #ccc;
float: left;
}
Demo