导航栏元素的对齐方式

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而不是

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试下面的代码，希望这项工作......！

＆＃13;

＆＃13;

@media (min-width: 768px){
  .navbar-nav {
      float: none!important;
      margin: 0 auto!important;
      display: table!important;
      table-layout: fixed!important;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您想在“li”中居中对齐文本，请执行

.navbar navbar-inverse{
 ul>li{
  text-align: center;
 }
}