html - My current horizontal scroll list consisting of images and text is placing the text horizontally to the images. How do I place the text below? -

fiddle

      <table>         <tr>             <td>                 <div id="filtercontainer">                     <ul id="filters">                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="normalpic">                             <a href="#" id="normal">normal</a> </li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="vintagepic">                             <a href="#" id="vintage">vintage</a> </li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="lomopic">                             <a href="#" id="lomo">lomo</a> </li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="claritypic">                             <a href="#" id="clarity">clarity</a> </li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="sincitypic">                             <a href="#" id="sincity">sin city</a> </li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="sunrisepic">                             <a href="#" id="sunrise">sunrise</a> </li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="crossprocesspic">                             <a href="#" id="crossprocess">cross process</a> </li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="orangepeelpic">                             <a href="#" id="orangepeel">orange peel</a></li>                         <li><img src="r0lgodlhaqabaiabap///waaach5baekaaealaaaaaabaaeaaaictaeaow==" id="lovepic">                             <a href="#" id="love">love</a></li>                         <li><img src="r0lgodlhaqabaiabap///waaach5baekaaealaaaaaabaaeaaaictaeaow==" id="grungypic">                             <a href="#" id="grungy">grungy</a></li>                         <li><img src="r0lgodlhaqabaiabap///waaach5baekaaealaaaaaabaaeaaaictaeaow==" id="jarquespic">                             <a href="#" id="jarques">jarques</a></li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="pinholepic">                             <a href="#" id="pinhole">pinhole</a></li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="oldbootpic">                             <a href="#" id="oldboot">old boot</a></li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="glowingsunpic">                             <a href="#" id="glowingsun">glowing sun</a></li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="hazydayspic">                             <a href="#" id="hazydays">hazy days</a></li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="hermajestypic">                             <a href="#" id="hermajesty">her majesty</a></li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="nostalgiapic">                             <a href="#" id="nostalgia">nostalgia</a></li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="hemingwaypic">                             <a href="#" id="hemingway">hemingway</a></li>                         <li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/pink_lemonade_blueberry_cupcake.png/revision/latest?cb=20150927002728" id="concentratepic">                             <a href="#" id="concentrate">concentrate</a></li>                     </ul>                 </div>             </td>         </tr>     </table>  #filtercontainer ul{      width: 30%;     display: inline-block;     white-space: nowrap;     overflow: auto;      margin: 0;     padding: 0; } #filtercontainer li{      width: 25%;     display: inline-block; }  #filtercontainer{     margin-top: 1%;     display: block;     margin: 0 auto; } 

i've tried changing width maybe squeeze text underneath image ends getting smushed , text remains horizontal images. i've tried adding height in case maybe there wasn't enough space didn't seem either :/

you can add display: block; <a> tag. put text under image.

css

li {   display: block; } 

jsfiddle