在允许包装的同时，我如何将一系列HREF集中

Question

我的简单页脚代码用宽度表100％包含一个中心的TD，其中包含另一个表，其中包含链接，这将中心链接中的链接。只要有足够的水平空间用于所有链接，它的工作就可以了，但是如果没有(即在手机，Portait上(不会包装。我如何保持居中，但请根据需要包装？

<footer>
    <table style="width:100%">
        <tr>
            <td align="center">
                <nav>
                    <table>
                        <tr>
                            <td>
                                <a href="/reports">
                                    Reports
                                </a>
                            </td>
                            <td>
                                <a href="/preferences.go">
                                    Preferences
                                </a>
                            </td>
                            <td>
                                <a href="/about.go">
                                    About
                                </a>
                            </td>
                            <td>
                                <a href="/license.go">
                                    License
                                </a>
                            </td>
                            <td>
                                <a href="/admin.go">
                                    Admin
                                </a>
                            </td>
                            <td>
                                <a href="/webhelp/index_frames.html">
                                    Help
                                </a>
                            </td>
                        </tr>
                    </table>
                </nav>
            </td>
        </tr>
    </table>
</footer>

Answer 1

跳过表，或将链接全部放入单个TD中。它们是内联的，必要时会包裹。将text-align:center设置在包含元素上以中心链接。

footer nav {
  text-align: center;
}

<footer>
  <nav>
    <a href="/reports">Reports</a>
    <a href="/preferences.go">Preferences</a>
    <a href="/about.go">About</a>
    <a href="/license.go">License</a>
    <a href="/admin.go">Admin</a>
    <a href="/webhelp/index_frames.html">Help</a>
  </nav>
</footer>

Answer 2

这是一个解决方案，如果不需要表格标记

.wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.flex-item {
  margin: 0 10px;
}

<footer>
  <div class="wrapper">
    <a class="flex-item" href="/reports">
                                    Reports
                                </a>
    <a class="flex-item" href="/preferences.go">
                                    Preferences
                                </a>
    <a class="flex-item" href="/about.go">
                                    About
                                </a>
    <a class="flex-item" href="/license.go">
                                    License
                                </a>
    <a class="flex-item" href="/admin.go">
                                    Admin
                                </a>
    <a class="flex-item" href="/webhelp/index_frames.html">
                                    Help
                                </a>
  </div>
</footer>