web-dev-qa-db-ja.com

navbar要素を垂直方向に中央揃えする方法（Twitter Bootstrap）？

これはこれまでのところ私のCSS/LESS CSSコードです：

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

FYI Twitterを使用していますBootstrapデモコード、HTMLは変更していません（ブランド名の変更を除く）。

ご覧のように、ブランド名は本来あるべきようにナビゲーションバーの垂直方向の中央に配置されていますが、ナビゲーションリンクはそうではありません（上にいくほど高くなっています）。この問題は、ナビゲーションバーの高さを変更して初めて明らかになりました。それらを垂直方向に中央揃えにするにはどうすればよいですか（たとえば this Webサイトなど）？

それが何らかのヘルプである場合、Chrome=で要素を強調表示するとこれが表示されます：

enter image description here

csstwitter-bootstrapalignmentlessvertical-alignment
19
XåpplI'-I0llwlg'I -

.brandクラスは、Bootstrap全体で使用されるベーステキストとは異なるline-heightを使用します。

オリジナルの関連パーツbootstrap navbar 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セレクターがより大きい60px @navbarHeightを反映するようにする必要があるでしょう。 （これらのデフォルト値は40px @navbarHeight用です）。 40px @elementHeightや29pxの行の高さを試してみてください。

7
wisew

上記の回答が役に立たず、HTMLに触れていない場合、私が考えられる唯一のことはCSSです。 bootstrapの例が使用されているcssを見て、それに応じて.navbar-innerと.navbar .brandのサイズを変更したい場合があります。

0
consprice

Bootstrap 3で同様の問題が発生しましたが、ブランドが削除されています。最後に、次のcssを使用しました：

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

50pxの画像が原因で、ナビゲーションバーのサイズが大きくなり、上下のマージンが10pxになっています。それが助けになるかどうかはわかりません。

0
mattauckland

あなたはこれを試すことができます：

display: table-cell;

0
Sllix