中心引導li元素響應頁面中心

我想讓導航欄中的所有元素總是顯示在導航欄的中心，因此頁面的中心，但仍然是向左拉。當我刪除引導庫時，它們是居中的，所以在某處存在衝突，但我不確定我想要使用引導程序。中心引導li元素響應頁面中心

我的自定義CSS也在引導之後被鏈接。

非常感謝。

HTML：

<div class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="container"> 
      <ul class="nav navbar-nav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="index.html">About</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS：

.navbar { 
    margin-bottom: 0px; 
    border-radius: 0px; 
} 

.nav { 
    list-style:none; 
    margin:0; 
    padding:0; 
    text-align:center; 
} 

.nav li { 
    display:inline; 
} 

.nav a { 
    display:inline-block; 
    padding:10px; 
} 

.navbar-default { 
    background: #900000; 
    border: none; 
}

來源

2016-02-15 James

內容有任何特定用途使用嵌套.container-fluid和.container類？ – markoffden

可能不是，除了它允許它與jumbotron相對的頁面邊緣對齊的事實。我拿起了一箇舊項目，這就是他們爲什麼會在那裏。只要元素在頁面中居中，它們就可以被刪除。 – James

@markoffden：通過自動邊距居中僅適用於塊元素。如果你想中心一個'inline-block'元素，可以通過父元素上的'text-align'完成。 – CBroe

默認情況下，引導的CSS浮動.navbar-nav左側。因此：

@media (min-width: 768px) 
.navbar-nav { 
    float: left; 
    margin: 0; 
}

您需要覆蓋此屬性。我建議給一個獨特的類，比如.myNav，並重置這個浮點數。還加入了display:inline-block

<div class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="container"> 
      <ul class="nav navbar-nav myNav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="index.html">About</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS：

.myNav{ 
float:none; 
display:inline-block; 
}

最後，添加一個文本對齊：中心到包裝導航欄元素中心內部

.navbar { 
    margin-bottom: 0px; 
    border-radius: 0px; 
    text-align:center; 
}

來源

2016-02-15 14:27:40 IndieRok

正是我在找的東西，以爲我是沿着正確的路線只是不知道哪裏拉到左邊正好發生。感謝您的詳細解答。 – James

我的榮幸！建議的話，總是檢查你的瀏覽器的開發工具來檢查CSS。你會發現這真的很有幫助 – IndieRok

這裏是一個可能的解決方案：

HTML：

<div class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="container"> 
      <ul class="nav navbar-nav navbar-center"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="index.html">About</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS：

.navbar { 
    margin-bottom: 0px; 
    border-radius: 0px; 
} 

.navbar-center { 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
    text-align:center; 
} 

.nav li { 
    display:inline-block; 
    float: none; 
} 

.nav a { 
    padding:10px; 
} 

.navbar-default { 
    background: #900000; 
    border: none; 
}

小提琴：https://jsfiddle.net/j2ska9ym/

來源

2016-02-15 14:26:56 DebRaj

中心引導li元素響應頁面中心

回答

相關問題