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

如果您希望它们之间有空间，那么您正在处理一个常见问题。这是一个很好的资源:http://css-tricks.com/equidistant-objects-with-css/

但是，如果你只是想让它们简单地居中排列

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>