web-dev-qa-db-fra.com

Comment centrer les éléments de la barre de navigation verticalement (Twitter Bootstrap)?

Voici mon code CSS/LESS CSS jusqu'à présent:

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

Qui produit ceci:

enter image description here

FYI J'utilise le code de démonstration Twitter Bootstrap, je n'ai pas modifié le code HTML (à part le changement de nom de marque).

Comme vous pouvez le constater, le nom de la marque est centré verticalement dans la barre de navigation comme il se doit, mais les liens de navigation ne le sont pas (ils sont un peu plus haut vers le haut). Le problème est devenu apparent une fois que j'ai modifié la hauteur de la barre de navigation. Comment puis-je les amener à être centrés verticalement (comme this website, par exemple)?

Si cela vous aide, la mise en surbrillance des éléments dans Chrome indique ce qui suit:

enter image description here

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

La classe .brand utilise un line-height différent du texte de base utilisé dans Bootstrap, ainsi que quelques autres différences clés.

Pièces pertinentes de la barre de navigation bootstrap d'origine LESS -

Pour .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;
}

Pour les liens dans la barre de navigation:

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

Vous devrez probablement jouer avec les valeurs de @elementHeight, line-height et peut-être padding pour le sélecteur .navbar .nav > li > a afin de refléter le plus grand @navbarHeight de 60px (ces valeurs par défaut sont destinées à un @navbarHeight de 40px). Essayez peut-être un @elementHeight 40px et/ou une hauteur de ligne de 29px pour commencer.

7
wisew

Si la réponse ci-dessus ne vous aide pas et que vous n'avez pas touché le code HTML, la seule chose à laquelle je peux penser est le css. Vous voudrez peut-être consulter le css utilisé par l'exemple d'amorçage et modifier les tailles de .navbar-inner et .navbar .brand en conséquence.

0
consprice

Je viens d'avoir un problème similaire avec Bootstrap 3 mais avec l'élément de marque. En fin de compte, j'ai utilisé le css suivant:

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

La taille de ma barre de navigation a augmenté en raison d’une image de 50 pixels, avec des marges supérieure et inférieure de 10 pixels. Je ne sais pas si cela peut vous aider.

0
mattauckland

Vous pouvez essayer ceci:

display: table-cell;

0
Sllix