调整大小时居中浮动div

Question

如何将无序的表列表居中，以便在调整窗口大小时，列表仍然居中。当列表不再适合时，此列表会将下一个表格移动到下一行。代码：

<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>&nbsp;</p>
    </div>
</div>

Answer 1

也许这会对你有帮助 -

＆＃13;

＆＃13;

#container {
    margin:0 auto;
    width:300px;
    background:red;
}

＆＃13;

<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>&nbsp;</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;