wie w3-bar Inhalt mit gleicher Höhe zu erstellen

Question

Derzeit versuche ich die neu hinzugefügte w3-bar Klasse von w3.css zu verwenden, um eine Top-Navigation mit einigen Tasten und einem Logo zu erstellen.

Wenn die Navigationsleiste nur aus Schaltflächen besteht, funktioniert alles gut, da die Höhe der Schaltflächen überall gleich ist.

Wenn ich nun versuche, der Navigationsleiste ein Logo hinzuzufügen, das höher ist als die Schaltflächen, werden die Schaltflächen oben in der Leiste platziert.

<div class="w3-border w3-light-grey w3-bar" style="height: 80px"> 
    <a class="w3-bar-item w3-button" href="#">Home</a> 
    <img class="w3-bar-item" src="http://lorempixel.com/200/56/"> 
    <a class="w3-bar-item w3-button" href="#">Link 1</a> 
    <a class="w3-bar-item w3-button" href="#">Link 2</a> 
    <a class="w3-bar-item w3-button w3-green w3-right" href="#">Link 3</a> 
</div> 

Ich mag es verwalten die Schaltflächen in der vertikalen Mittelposition zu bringen, so dass es viel besser aussieht.

Ich kann diese vertikal zentriert Tasten verwalten, wenn i w3-Zell-Reihe und w3-Zell-Mitte wie so verwenden:

<div class="w3-border w3-light-grey w3-cell-row" style="height: 80px"> 
    <a class="w3-cell w3-cell-middle w3-button" href="#">Home</a> 
    <img class="w3-cell w3-cell-middle " src="http://lorempixel.com/200/56/"> 
    <a class="w3-cell w3-cell-middle w3-button" href="#">Link 1</a> 
    <a class="w3-cell w3-cell-middle w3-button" href="#">Link 2</a> 
    <a class="w3-cell w3-cell-middle w3-button w3-green w3-right" href="#">Link 3</a> 
</div> 

Aber wenn ich vertikal versuchen in der die Tasten Zentrieren w3-bar Navigationsleiste, ich kann es nicht zur Arbeit bringen.

Sie diese Geige überprüfen können die beiden unterschiedlichen Ergebnisse zu sehen:

https://jsfiddle.net/TheChaos/o1cg5e64/

Weiß jemand, wie Mitte senkrecht (und die navbar füllen) vollständig mit w3.css Klassen (oder einige zusätzliche CSS) ?

Answer 1

eine andere Antwort Ich füge einstellen, wie ich die erste Antwort glauben immer noch für einige Leser hilfreich sein.

https://jsfiddle.net/showcaseimagery/8r9bmgm3/

die .w3-Bar-Artikel dieser CSS wird es tun, habe ich hinzugefügt die beiden anderen Arten für optionals

.w3-bar-item { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

#brand { 
    display: block !important; 
    padding: 0 !important; 
} 

img#brand { 
    height: 100%; 
    width: auto; 
} 

mit der einzigen Änderung des HTML als #brand

Answer 2

Hier ya gehen, wird dies Ihr Problem lösen?

https://jsfiddle.net/byxw86d1/

Ich habe die Inline-Höhe vom div Eltern entfernt und hat eine .brand Klasse auf das Bild für das Styling. die Navigationselemente groß zu haben, ist besser für kleine Bildschirm Benutzer, wenn Sie einen Haltepunkt für die

<div class="w3-border w3-light-grey w3-cell-row" style="height: 80px"> 

.brand { 
    display:block; 
    height:auto; 
    width:100%; 
    margin-bottom:0 !important; 
} 

<!-- create full size image for larger screen OPTIONAL --> 
.w3-cell-row { 
    display:block; 
}