19

これはこれまでの私のCSS/LESSCSSコードです。

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

これを生成します：

ここに画像の説明を入力してください

参考までに、Twitter Bootstrapデモコードを使用していますが、HTMLを変更していません（ブランド名を変更する以外は）。

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

助けになる場合は、Chromeで要素を強調表示すると次のように表示されます。

ここに画像の説明を入力してください

4

4 に答える 4

7

この.brandクラスは、line-heightBootstrap全体で使用される基本テキストとは異なるもの、およびその他のいくつかの重要な違いを使用します。

オリジナルのブートストラップナビゲーションバーからの関連パーツ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がより大きな60pxを反映するようにpaddingする必要があります（これらのデフォルト値は40pxを対象としています）。たぶん、40pxおよび/または29pxの行の高さを試してみてください。.navbar .nav > li > a@navbarHeight@navbarHeight@elementHeight

于 2012-07-11T00:43:58.870 に答える
0

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

display: table-cell;

于 2012-07-10T08:27:11.543 に答える
0

上記の答えが役に立たず、HTMLに触れていない場合、私が考えることができるのはcssだけです。.navbar-innerブートストラップの例で使用されているcssを確認し、それに応じてサイズを変更することをお勧めします.navbar .brand。

于 2012-07-10T10:25:09.740 に答える
0

Bootstrap 3でも同様の問題が発生しましたが、ブランド要素で問題が発生しました。最後に、私は次のcssを使用しました。

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

画像が50ピクセルで、上下の余白が10ピクセルであるため、ナビゲーションバーのサイズが大きくなりました。それが役に立ったかどうかはわかりません。

于 2014-02-18T01:52:41.747 に答える