如何集中左侧导航

Question

我在尝试连续集中引导标准导航时遇到问题。

<footer id="page_footer">
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <ul id="page_footer_links" class="nav nav-pills nav-center">
                <li role="presentation"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages</a></li>
            </ul>
        </div>
        <div class="col-md-4">
            <p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com <a href="http://wordpress.org/" title="A Semantic Personal Publishing Platform" rel="generator" target="_blank">WordPress</a>!!!</p>
        </div>
    </div>
</div>

这里是完整的小提琴：http://jsfiddle.net/vpontin/bkpnrLo0/

我尝试放置文本中心和中心块。没有工作。即使将 margin 0 auto 或 text-align: center 设置也不起作用。

我需要做什么？

Answer 1

.nav-pills 列表项具有向左浮动的默认行为。因此将其更改为none 并使用display: inline-block 将它们显示在一行中。

Updated JSfiddle

#page_footer {
  background-color: #f5f5f5;
  width: 100%;
}
#page_footer .container {
  padding: 20px;
}
#page_footer_links {
  margin: 0 auto;
  text-align: center;
}
#page_footer_wordpress {
  margin: 0px;
  height: 40px;
  line-height: 40px;
}
.nav-pills > li {
  float: none !important;
  display: inline-block !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<footer id="page_footer">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <ul id="page_footer_links" class="nav nav-pills nav-center">
          <li role="presentation"><a href="#">Home</a>
          </li>
          <li role="presentation"><a href="#">Profile</a>
          </li>
          <li role="presentation"><a href="#">Messages</a>
          </li>
        </ul>
      </div>
      <div class="col-md-4">
        <p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com <a href="http://wordpress.org/" title="A Semantic Personal Publishing Platform" rel="generator" target="_blank">WordPress</a>!!!</p>
      </div>
    </div>
  </div>