Is there a way to center an unordered list of tables while ensuring that it remains centered even when the window is resized? The list should move each table to a new line if they can no longer fit. Check out the code snippet below for reference:
<div id="container">
<ul id="project-list" class="child">
<div class="the-crew_item">
<li>
<a href="#/got/" class="proj-link">
<table border="0" cellpadding="0" cellspacing="0" class="proj">
<tr valign="top">
<td>
<a href="#/got/" class="proj-link"><img src="images/got-thumb.jpg" border="0" /></a></td>
</tr>
<tr valign="top">
<td class="project-desc" style="background: url(images/logo-hbo.png) no-repeat center center;">
<h1>Game of Thrones</h1>
Epic Fan Event
</td>
</tr>
</table>
</a>
</li></div><div class="the-crew_item">
<li>
<a href="#/airbnb/" class="proj-link">
<table border="0" cellpadding="0" cellspacing="0" class="proj">
<tr valign="top">
<td>
<a href="#/airbnb/" class="proj-link"><img src="images/air-thumb.jpg" border="0" /></a></td>
</tr>
<tr valign="top">
<td class="project-desc" style="background: url(images/logo-airbnb.png) no-repeat center center;">
<h1>Airbnb</h1>
Hello LA
</td>
</tr>
</table>
</a>
</li>
</ul>
<p> </p>
</div>
</div>