html - 导航栏元素对齐

Question

我正在构建一个网站，我在导航栏中遇到了导航栏元素未居中对齐的问题

HTML 和 CSS 代码:

<nav class="navbar navbar-inverse">
  <div class="container">
    <ul id="navigation" class="nav navbar-nav">
      <li class="active"> <a href="#"> Home    </a></li>
      <li><a href="#"> Marketing Services </a> </li>
      <li> <a href="#"> IT Management Services </a> </li>
      <li> <a href="#"> Molex Portfolio  </a> </li>
      <li> <a href="#"> Contact Us </a> </li>
      <li> <a href="#"> Employement Opportunities </a> </li>
    </ul>
  </div>
</nav>

我的CSS代码是

body{
    background-repeat:no-repeat;
    background-position: top right;
    background-attachment: fixed;
}

h1{
    margin:1px ;
    color:red !important;
    text-align:center;
}

hr{
    border-color:red !important;
    width:50%;
}

a {
  padding: 0px 10px;      
}

#navigation{
    text-align:center!important;
    display: inline-block!important;
    margin: auto;
}

Answer 1

您正尝试将 ul 居中于 inline-block 样式，请尝试将其更改为 block

body{

    background-repeat:no-repeat;
    background-position: top right;
    background-attachment: fixed;
}
h1{
    margin:1px ;
    color:red !important;
    text-align:center;
}
hr{
    border-color:red !important;
    width:50%;
}
a {
  padding: 0px 10px;

}
#navigation {
    text-align:center!important;
    display: block!important;
    margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
            <div class="container">
                <ul id="navigation" class="nav navbar-nav">
                    <li class="active"> <a href="#"> Home    </a></li>
                    <li><a href="#"> Marketing Services </a> </li>
                    <li> <a href="#"> IT Management Services </a> </li>
                    <li> <a href="#"> Molex Portfolio  </a> </li>
                    <li> <a href="#"> Contact Us </a> </li>
                    <li> <a href="#"> Employement Opportunities </a> </li>

                </ul>

            </div>

        </nav>