Wie vertikal ausrichten-logo und-Menü in der Stiftung?

Habe ich ein einfaches top-bar-Stiftung, die kodiert wird, wie dies nach..

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li><a href="default.html"><img src="http://dev.golightlyplus.com/wig/website/images/wig-logo.png" alt="Home"></a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Team</a></li>
    </ul>
  </div>
</div>

Den codepen denn es ist hier.

Was ich bin zu wollen tun ist vertikal ausrichten das richtige Menü mit der Mitte des Logos. Ich kann anwenden, einen Rand über das top-bar-richtig Klasse.. aber ist es ein schlauer Weg, dies zu tun in der Stiftung 6?

Würde mit so etwas wie Equalizer machen hier Sinn?

Dank.

  • Mein link war falsch. Überprüfen Sie jetzt.
InformationsquelleAutor magician11 | 2016-01-17



2 Replies
  1. 4

    Hier ist eine funktionierende demo.

    Zunächst die position von top-bar zu relative.

    .top-bar {
        position: relative;
    }

    Legen Sie dann die position der .menu im top-bar-right zu absolute und Nutzung verwandeln:

    .top-bar-right .menu {
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        right: 0;
    }
    • Danke. Perfekt 🙂
    • Nicht sicher, ob dies eine neue Frage.. aber wenn ich ein dropdown-Methode bricht. codepen.io/magician11/pen/gPvNOd Gedanken? Nur etwas zu tun, wie margin-top: 18px; für .top-bar-right .menu funktioniert.
  2. -1

    Stark bezweifle, dass Sie noch Hilfe brauchen, aber für alle anderen, die stolpern über diesen, wie ich es Tat, verwenden Sie die oben beschriebenen Verfahren, aber fügen Sie eine id zu Ihrem top-bar. Ich gab mir einen id von #main-nav.

    Verwenden Sie die vorgeschriebenen CSS-code und die Ziel – #main-nav und Sie sollten sehen, es funktioniert wieder.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.