html - 在 Bootstrap Nav 中居中一项

Question

我试图在我的 Bootstrap 导航中将特定链接居中。

我的代码:

<nav class="navbar navbar-default user_info_bar" role="navigation">
  <div class="collapse navbar-collapse">

    <ul class="nav navbar-nav">
      <li>
        <p class="navbar-text"><%= @user.screens.count %> Screenshots</p>
      </li>
      <li>
        <p class="navbar-text"><%= @user.points %> Points</p>
      </li>
    </ul>

    <ul class="nav navbar-nav"> <!-- This must be in the middle -->
      <li class="user_follow">
        <%= link_to "Follow", follow_user_path %>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li>
        <p class="navbar-text"><%= @user.follow_count %> Following</p>
      </li>

      <li>
        <p class="navbar-text"><%= @user.followers.count %> Followers</p>
      </li>
    </ul>

  </div>
</nav>

http://bootply.com/107875

现在我在左边和右边有 2 个按钮。我正在尝试将“关注”按钮准确地置于中心。

Answer 1

<ul class="nav navbar-nav centerContainer"> <!-- This must be in the middle -->
  <li class="user_follow">  
     <%= link_to "Follow", follow_user_path %>
  </li>
</ul>

CSS

.centerContainer {
  position: absolute;
  left: 50%;
}

http://bootply.com/107882