Centrage logo de la marque dans le Bootstrap 3 Navbar

Je suis en train de mettre en œuvre un Bootstrap 3 barre de navigation de sorte que le logo de la marque à toujours rester dans le milieu. C'est le code:

HTML:

<div class="navbar navbar-fixed-top navbar-default">
  <div class="navbar-inner">
    <div class="container">

      <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
    
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
    
                </button>

      <a class="brand" style="margin: 0; float: none;" href="#">
        <img src="/Content/themes/next/images/logo.png" /></a>

      <div class="nav-collapse">

        <ul class="nav">
          <li> <a href="#">Item 1</a></li>
          <li> <a href="#">Item 1</a></li>
          <li> <a href="#">Item 1</a></li>
        </ul>
      </div>

      <ul class="nav pull-right">
        <li>
          <a href="#">
            <div class="nextCog"></div>
          </a>
        </li>
      </ul>

      <span class="navbar-text pull-right">superpup1 </span>

    </div>
  </div>
</div>

Il fait une jolie barre de navigation:
Centrage logo de la marque dans le Bootstrap 3 Navbar

Cependant, j'aimerais que le logo (vert) restent dans le milieu de façon persistante. Je suis en ajoutant ce style à la balise "image de marque" de la classe:

<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
                <img src="/Content/themes/next/images/logo.png" /></a>

Il résout partiellement le problème: le logo est dans le milieu, mais il pousse le reste de la barre de navigation éléments bas:

Centrage logo de la marque dans le Bootstrap 3 Navbar

C'est un effet indésirable que je voudrais éliminer. Pouvez-vous me proposer une solution? C'est peut-être une mauvaise approche pour le centrage d'un logo depuis le début ?

  • Cela ressemble à de Bootstrap 2 pour moi
InformationsquelleAutor AstroSharp | 2014-05-01
  1. 71

    Essayez ceci:

    .navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

    Centrage de votre logo par 50% et moins de la moitié de votre logo largeur de sorte qu'il n'aura pas de problème lorsque le zoom avant et arrière.

    Voir violon

    • J'ai seulement voulu centrer le logo sur le mobile (écran-sm) des dispositifs j'ai donc écrit une requête de média, de définir la position absolue, décalage de la marge de gauche par 1/2 de la largeur de l'image du logo, et de l'ensemble de la gauche de la valeur à 50%. Fonctionne comme un charme.
    • Le changement ".la marque" pour ".navbar-marque" et cela fonctionnera.
    • Mon mal de tête a été résolu par cette réponse. Merci homme.
    • Vous pouvez maintenant utiliser transform:translateX(-50%) plutôt que de margin-left pour que cela fonctionne avec n'importe quel logo de la largeur.
    • c'est une bien meilleure solution. Aussi, pour n'importe qui dans l'avenir qui utilise la réponse est, "le logo de la largeur" est inclusive de remplissage. Mon logo image a été 130px de large, mais la valeur par défaut de bootstrap, le rembourrage de 30 pixels supplémentaires, j'ai donc dû utiliser margin-left: -80px !important; pour le centre de la mine de façon appropriée. Utilisez simplement transform que Lee a suggéré. Il fonctionne mieux (Chrome, au moins).
    InformationsquelleAutor Tepken Vannkorn
  2. 47

    La façon la plus simple est css transformer:

    .navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

    DÉMO: http://codepen.io/candid/pen/dGPZvR

    Centrage logo de la marque dans le Bootstrap 3 Navbar

    De cette façon, travaille également avec d'dynamiquement la taille d' images d'arrière-plan pour le logo et nous permet d'utiliser le texte cacher classe:

    CSS:

    .navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center /contain no-repeat;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  width: 200px; /* no height needed ... image will resize automagically */
}

    HTML:

    <a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>

    Nous pouvons également utiliser flexbox bien. Cependant, en utilisant cette méthode, nous devrions avoir à se déplacer navbar-brand à l'extérieur de navbar-header. De cette façon, est si grande, parce que nous pouvons maintenant avoir une image et texte côte à côte:

    Centrage logo de la marque dans le Bootstrap 3 Navbar

    .brand-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.navbar-brand {
  display: flex;
  align-items: center;
}

    Démo: http://codepen.io/candid/pen/yeLZax

    Pour atteindre ces résultats sur mobile, il suffit de conclure au-dessus de la css à l'intérieur d'une requête de média:

    @media (max-width: 768px) {

}
    • J'aime votre meilleure solution! Merci!
    • En fait, cela peut ne pas fonctionner lorsque la valeur liquidative est effondré! Impossible de cliquer sur le bouton dans le menu déroulant!
    • n'a pas remarqué. Solution facile si. J'ai mis à jour le codepen. Juste besoin d'ajouter .navbar-toggle { z-index: 1; }
    InformationsquelleAutor Bryan Willis
  3. 25

    Mis à jour 2018

    Bootstrap 3

    Voir si cet exemple permet de: http://bootply.com/mQh8DyRfWY

    La marque est centrée à l'aide..

    .navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

    Votre balisage pour Bootstrap 2, pas 3. Il n'est plus navbar-inner.

    MODIFIER - une Autre approche est d'utiliser transform: translateX(-50%);

    .navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

    http://www.bootply.com/V7vKDfk46G

    Bootstrap 4

    Dans le Bootstrap 4, mx-auto ou flexbox peut être utilisé pour le centre de la marque et d'autres éléments. Voir Comment la position de la barre de navigation de contenu dans le Bootstrap 4 pour une explication.

    Voir aussi:

    Bootstrap barre de navigation à gauche, centré ou aligné à droite des éléments

    • Lâche downvote, sans explication?
    • Le "modifier" la solution est parfait. J'ai eu à utiliser cette approche vs le plus simple absolu de centrage, car c'était de jouer avec mon site google analytics et s'étendant en travers de la page.
    InformationsquelleAutor Zim
  4. 5

    Vieille question, mais juste pour la postérité.

    J'ai trouvé la meilleure façon de le faire est d'avoir l'image en tant qu'image d'arrière-plan de la barre de navigation de marque. Juste fait en sorte de mettre en largeur.

    .navbar-brand
{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    background-image: url('logo.png');
}
    • C'était la seule solution qui a fonctionné pour moi avec la dynamique de l'image de marque de tailles
    InformationsquelleAutor Andrew Martin
  5. 0

    Une solution où le logo est vraiment centré et les liens sont justifiées.

    Max nombre recommandé de liens pour la nav est de 6, en fonction de la longueur des mots dans eache lien.

    Si vous avez 5 liens, insérer un lien vide et le style avec:

    class="hidden-xs" style="visibility: hidden;"

    de cette façon, le nombre de liens est toujours la même.

    HTML:

    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-nav > li {
float: none;
vertical-align: bottom;
}
#site-logo {
position: relative;
vertical-align: bottom;
bottom: -35px;
}
#site-logo a {
margin-top: -53px;
}
</style>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-justified navbar-nav center-block">
<li class="active"><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
<li><a href="#">Fourth Link</a></li>
<li><a href="#">Fifth Link</a></li>
<li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    De voir le résultat, cliquez sur exécuter extrait de et puis pleine page

    Violon

    InformationsquelleAutor q81