在 HTML 中居中​​导航栏及其元素

Question

我在创建子元素也居中的居中导航栏时遇到问题。我使用了 nav-justified ，它几乎可以工作，但是这似乎破坏了模型，因此当窗口较小时，折叠的菜单停止正常工作。

HTML代码是：

        <header id="header">
        <div class="container">

            <!-- MOBILE MENU -->
            <button id="mobileMenu" class="fa fa-bars" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"></button>

            <!-- NAV MENU -->
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul id="onepageNav" class="nav  nav-justified"><!-- id="onepageNav" for homepage only -->
                        <li class="active"><a href="#how">How</a></li>
                    <li><a href="#help">Help</a></li>
                    <li><a href="#support">Support</a></li>
                    <li><a href="#consultancy">Consultancy</a></li>
                    <li><a href="#blog">Blog</a></li>
                </ul>
            </nav>
            <!-- /NAV MENU -->

        </div>
    </header>

不确定要包含什么 css，所以会添加您需要查看的任何内容。

已经有一些关于此的问题，但答案似乎对我不起作用。

非常感谢任何帮助和解释，因为我对此很陌生。

谢谢

Answer 1

如果您希望它们之间有空间，那么您正在处理一个常见问题。这是一个很好的资源：@​​987654321@

但是，如果您只是希望它们简单地居中排列

nav { text-align: center; }

nav ul {
    margin: 0;
    padding: 0;
}  

nav ul li { 
  display: inline-block; 
  background: pink;
  padding: 1em;
}

<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul id="onepageNav" class="nav  nav-justified"><!-- id="onepageNav" for homepage only -->
                        <li class="active"><a href="#how">How</a></li>
                    <li><a href="#help">Help</a></li>
                    <li><a href="#support">Support</a></li>
                    <li><a href="#consultancy">Consultancy</a></li>
                    <li><a href="#blog">Blog</a></li>
                </ul>
            </nav>