如何垂直居中導航欄元素（Twitter Bootstrap）？

這是我的CSS/CSS LESS到目前爲止代碼：如何垂直居中導航欄元素（Twitter Bootstrap）？

//make navbar taller 
@navbarHeight: 60px; 

//make navbar link text 18px 
.navbar-inner { 
    font-size: 18px; 
} 

//make navbar brand text 36px 
.navbar .brand { 
    font-size: 36px; 
}

將會產生這樣的：

enter image description here

僅供參考我使用Twitter的引導演示代碼，我沒有改變該HTML（除了改變品牌名稱）。

正如您所看到的，品牌名稱在導航欄中垂直居中，就像它應該是的一樣，但導航鏈接卻不是（它們朝上朝上）。一旦我改變了導航欄的高度，問題就會變得明顯。我怎樣才能讓他們垂直居中（例如this網站）？

如果它的任何幫助，凸顯鍍鉻元素表明這一點：

enter image description here

來源

2012-07-10 XåpplI' -I0llwlg' I -

將您的代碼添加到http://www.jsfiddle.net – SVS 2012-07-10 07:42:04

.brand類使用與在整個Bootstrap中使用的基本文本不同的line-height以及一些其他關鍵區別。

從原來的引導導航欄相關部分LESS -

爲.brand：

.brand { 
    // Vertically center the text given $navbarHeight 
    @elementHeight: 20px; 
    padding: ((@navbarHeight - @elementHeight)/2 - 2) 20px ((@navbarHeight - @elementHeight)/2 + 2); 
    font-size: 20px; 
    line-height: 1; 
}

對於導航欄鏈接：

.navbar .nav > li > a { 
    @elementHeight: 20px; 
    padding: ((@navbarHeight - @elementHeight)/2 - 1) 10px ((@navbarHeight - @elementHeight)/2 + 1); 
    line-height: 19px; 
}

你可能需要玩的值爲@elementHeight,line-height，也許padding爲.navbar .nav > li > a select或反映較大的60px @navbarHeight（這些默認值是指40px @navbarHeight）。也許嘗試一個40px的@elementHeight和/或一個29px線高度開始。

來源

2012-07-11 00:43:58 wisew

謝謝。操作'.navbar .nav> li> a'的'line-height'這樣做（改變'@ elementHeight'似乎沒有效果）。 – 2012-07-25 03:21:01

.brand本身不起作用。 Bootstrap的「.nav .brand」覆蓋它。你必須插入「.nav .brand {」和跟隨你的代碼，那麼只有它會覆蓋引導程序的原始填充。 – 2012-12-07 10:23:07

我只使用線條高度，類似於我的標誌高度。它運作良好:)謝謝 – drupality 2016-03-18 20:33:48

你可以試試這個：

display: table-cell;

來源

2012-07-10 08:27:11 Sllix

如果以上回答沒有幫助，和你沒有觸及html，我唯一能想到的就是CSS。您可能需要查看bootstrap示例所使用的css，並相應地修改.navbar-inner和.navbar .brand的大小。

來源

2012-07-10 10:25:09 consprice

我剛剛與Bootstrap 3有類似的問題，但與品牌eliment。到底我用下面的CSS：

.navbar-brand { 
    font-size: 3em; 
    line-height: 1em; 
}

我的導航欄的大小由於圖像50像素的增加，具有頂部和10px的底部邊緣。不知道這是否有幫助。

來源

2014-02-18 01:52:41 mattauckland

如何垂直居中導航欄元素（Twitter Bootstrap）？

回答

相關問題