中心對齊引導欄中的導航欄內容

我想中心導航欄的鏈接。但遺憾的是，迄今爲止我還沒有多少運氣。我試圖使用navbar對齊，但它只是拋出所有的東西不成比例。中心對齊引導欄中的導航欄內容

here is the code。

來源

2016-05-28 Nabeel abbas

我假設你想要的一切中心的中心。最簡單的方法是在父元素上使用display: inline-block，然後使用text-align: center。然後也重float使用默認aligment：

看到你的最新演示：http://www.bootply.com/iu9NOXfmEV

來源

2016-05-28 20:36:16 martin

-1

使容器inline-block獲得內容的寬度並對齊navbar元素。爲了擺脫下面的差距，使用vertical-align: top。

爲了避免更改時倒塌添加媒體查詢：

@media (min-width: 768px) { 
    .navbar { 
     text-align:center; 
    } 
    .navbar .container-fluid { 
     display: inline-block; 
     vertical-align: top; 
    } 
}

你可以看到here

來源

2016-05-28 20:23:56

爲了一個誰下來投票，請關心解釋爲什麼.... –

這將是明智重置浮動，這樣的導航項的高度與導航欄的高度相匹配。除此之外，這是一個公平的解決方案。 – Charlie

@Charlie你是對的。我沒有注意到差距。解決這個問題的另一種方法是在更新我的答案時在容器上設置「vertical-align：top」。感謝您指出 –

中心對齊引導欄中的導航欄內容

回答

相關問題