html - 你如何在 CSS 中将一个换行的 <nav> 菜单居中？

Question

我有一个 UL 在宽和窄宽度上正确居中，但在中间范围内中断。当它很宽时，一切都很好，当浏览器变窄时，一切都很好，但是当使用中等宽度时，比如 800px 宽，菜单换行到下一行，现在可以使用，但我想看看它是否是可以将第二行链接居中。这是它在顶部(红色圆圈)的外观以及我希望它在底部(绿色圆圈)执行的操作的屏幕截图。

如果你看another thread , 你会在他的 example link 中看到我的菜单现在是如何工作的.如果在他的示例中缩小浏览器，您会注意到菜单换行并且第二行左对齐。

我希望第二行居中位于第一行下方，如上图所示。这可能吗？

这是 HTML:

<div id="navContainer" 
    <ul>
        <li class="menu_home"><a href="/">Home</a></li>
        <li class="menu_gallery squished"><a href="/galleryIntro.php">Gallery of Properties</a></li>
        <li class="menu_service"><a href="/service.php">Service Options</a></li>
        <li class="menu_contact"><a href="/contact.php">Contact Us</a></li>
        <li class="menu_test"><a href="/panos/laakona2/">Testing HotSpots</a></li>
    </ul>
</div>

我不认为 CSS 是必需的，因为它并没有像我想要的那样工作(它分布在大约 38 个不同的 CSS 文件中，所有内容都向左浮动，但我可以在此处添加 css，如果你认为这可能有帮助，但无论如何我都愿意放弃一切......)

Answer 1

添加

text-align:center;

到您的 Tinkerbin 示例中的 .nav ul。

或:

   #navContainer ul {
         text-align:center;
    }

你自己的CSS