<ul class="activities"> <li> <img src="http://dummyimage.com/100x100" width="100" height="100" alt="100x100 dummy image"> <p>A</p> </li> <li> <img src="http://dummyimage.com/100x100" width="100" height="100" alt="100x100 dummy image"> <p>B</p> </li> <li> <img src="http://dummyimage.com/100x100" width="100" height="100" alt="100x100 dummy image"> <p>C</p> </li> <li> <img src="http://dummyimage.com/100x100" width="100" height="100" alt="100x100 dummy image"> <p>D</p> </li> </ul>
.activities { overflow: hidden; /* The min-width here is not necessary, but it will require that there's at least two columns. */ min-width: 400px; } .activities > li { float: left; overflow: hidden; width: 200px; } .activities > li > img { float: left; } .activities > li > p { text-align: center; }