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以使链接居中。

＆＃13;

footer nav {
  text-align: center;
}

＆＃13;

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

＆＃13;

Answer 2

如果不需要表格标记，这是使用Flex的解决方案

.element{
    display: flex;
    justify-content: center; /* horizontal alignment */

.element__item {
    display: flex;           /* nested flex container */
    align-items: center;     /* vertical alignment */
}

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

我如何将一系列href集中在一起，同时允许它包裹

2 个答案: