Bootstrap垂直居中導航欄問題

Question

我有一個標准的bootstrap 3導航欄，試圖將大於導航欄的徽標以及菜單居中。 我已經嘗試了很多先前相關的SO問題，但是找不到有效的解決方案。

我目前正在嘗試給兩者均等的填充，以使它們垂直居中，並且我還嘗試為菜單項設置行高，但這並不奏效。

這不是我目前正在做的事情：

.navbar-brand,
.nav {
  padding: 20px 0;
}

這是我的代碼： https : //jsfiddle.net/rhfhq33s/

Answer 1

您需要直接將line-height設置為錨點：

@media (min-width: 768px) {
  #menu-primary > li > a { line-height: 95px; }
}

我還使用了媒體規則，因為我想當折疊菜單時您不需要該line-height 。

https://jsfiddle.net/rhfhq33s/2/