html - How to list icons to the right with text underneath each accordingly? -

html - How to list icons to the right with text underneath each accordingly? -

i want show pictures of icons left right , have respective names underneath each , spaced. text "icon1" underneath icon1 , on. tiergo has no css in it.

<div id="tiergo"> <h1>icon list</h1> <img src="tinyicons/icon1.png" style="margin-right:15px;" /> <img src="tinyicons/icon2.png" style="margin-right:15px;" /> <img src="tinyicons/icon3.png" style="margin-right:15px;" /> <img src="tinyicons/icon4.png" style="margin-right:15px;" /> <img src="tinyicons/icon5.png" style="margin-right:15px;" /> </div>

i had success using divs , list.i added bit of css list. fiddle

<div id="tiergo"> <h1>icon list</h1> <ul> <li> <div image1> <img src="http://placehold.it/50x50"/> <div > image 1 </div> </div> </li> <li> <div image2> <img src="http://placehold.it/50x50"/> <div > image 2 </div> </div> </li> <li> <div image3> <img src="http://placehold.it/50x50"/> <div > image 3 </div> </div> </li> </ul>

css:

li{ list-style-type: none; display: inline; margin-right: 15px; float: left; }

html css list twitter-bootstrap margin