如何居中导航栏垂直元素（微博引导）？

问题描述

这是我的CSS / LESS CSS code到目前为止：

This is my CSS/LESS CSS code so far:

//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;
}

这会产生这样的：

Which produces this:

FYI我使用Twitter的引导示范code，我还没有（更改品牌名称除外）改变了HTML 的

正如你所看到的，品牌名称是垂直居中导航栏内像它应该是，但导航链接是不是（他们是有点高了接近顶部）。这个问题只有一次我改变了导航栏的高度变得明显。我怎样才能让他们垂直居中（如本网站，例如）？

As you can see, the brand name is centered vertically within the navbar like it should be, but the navigation links are not (they're bit higher towards the top). The problem only became apparent once I altered the height of the navbar. How can I get them to be centred vertically (like this website, for example)?

如果它的任何帮助，突出在Chrome中的元素表明这一点：

If it's any help, highlighting the elements in Chrome shows this:

推荐答案

在。品牌类使用一个不同的的line-height 比，用于在整个引导基础文本，以及其他一些关键不同之处。

The .brand class uses a different line-height than the base text that is used throughout Bootstrap, as well as a few other key differences.

从原来的引导导航栏相关部分LESS -

Relevant parts from the original bootstrap navbar LESS -

有关。品牌：

.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 ，也许值填充为 .navbar .nav＆GT;李＆GT;一个选择，以反映大60PX @navbarHeight （这些默认值旨在为40PX @navbarHeight ）。也许尝试40PX @elementHeight 和/或29px的line-height启动。

You'll probably need to play around with the values of @elementHeight, line-height, and maybe padding for the .navbar .nav > li > a selector to reflect the bigger 60px @navbarHeight (these default values are meant for a 40px @navbarHeight). Maybe try a 40px @elementHeight and/or a 29px line-height to start.

这篇关于如何居中导航栏垂直元素（微博引导）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！