在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

Answer 2

試試這個，然後：

.navbar-collapse { 
    position: relative; 
}   
.nav-middle { 
    position: absolute; 
    left: 50%; 
    margin-left: -34px; /* Half the width of your button 
} 

你必須一類nav-middle添加到中間ul，你會需要調整風格es刪除按鈕旁邊的左邊框。