Edit in JSFiddle

<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;
}