Centratura del logo del marchio in Bootstrap 3 Navbar

Sto cercando di implementare una barra di navigazione Bootstrap 3 in modo che il logo del marchio rimanga sempre nel mezzo. Questo è il codice:

Fa una bella barra di navigazione: inserisci la descrizione dell'immagine qui

Tuttavia, vorrei che il logo (verde) rimanga nel mezzo costantemente. Sto aggiungendo questo stile al tag con la class “marca”:

   

Risolve parzialmente il problema: il logo si trova nel mezzo ma spinge verso il basso il resto degli elementi della barra di navigazione:

inserisci la descrizione dell'immagine qui

Questo è un effetto indesiderato che vorrei eliminare. Potresti suggerire una soluzione? Forse è un approccio sbagliato per centrare un logo dall’inizio?

Prova questo:

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

Centratura del logo del 50% e meno metà della larghezza del logo in modo che non abbia problemi durante l’ingrandimento e la riduzione.

Vedi il violino

Il modo più semplice è trasformare css :

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

DEMO: http://codepen.io/candid/pen/dGPZvR

logo di sfondo centrato bootstrap 3


In questo modo funziona anche con immagini di sfondo di dimensioni dinamiche per il logo e ci consente di utilizzare la class text-hide:

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:

 Brand Text  

Possiamo anche usare la flexbox. Tuttavia, usando questo metodo dovremmo spostare la navbar-brand navbar-header al di fuori navbar-header della navbar-header di navbar-header . In questo modo è fantastico, perché ora possiamo avere immagini e testo affiancati:

logo bootstrap 3 centrato

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

Demo: http://codepen.io/candid/pen/yeLZax

Per raggiungere questi risultati solo su dispositivi mobili, è sufficiente avvolgere il css sopra all’interno di una query multimediale:

 @media (max-width: 768px) { } 

Aggiornato il 2018

Bootstrap 3

Vedi se questo esempio aiuta: http://bootply.com/mQh8DyRfWY

Il marchio è centrato utilizzando ..

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

Il tuo markup è per Bootstrap 2, non 3. Non c’è più un navbar-inner .

EDIT – Un altro approccio sta usando transform: translateX(-50%);

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

http://www.bootply.com/V7vKDfk46G

Bootstrap 4

In Bootstrap 4 è ansible utilizzare mx-auto o flexbox per centrare la marca e altri elementi. Vedi Come posizionare il contenuto della barra di navigazione in Bootstrap 4 per una spiegazione.

Vedi anche:

Bootstrap NavBar con elementi allineati a sinistra, al centro o a destra

Vecchia domanda, ma solo per i posteri.

Ho trovato il modo più semplice per farlo è quello di avere l’immagine come immagine di sfondo del marchio navbar. Assicurati solo di inserire una larghezza personalizzata.

 .navbar-brand { margin-left: auto; margin-right: auto; width: 150px; background-image: url('logo.png'); } 

Una soluzione in cui il logo è veramente centrato e i collegamenti sono giustificati.

Il numero massimo consigliato di link per la nav è 6, a seconda della lunghezza delle parole in eache link.

Se hai 5 link, inserisci un link vuoto e modificalo con:

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

in questo modo il numero di collegamenti è sempre pari.