css - 如何在允许其换行的同时将一系列 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>