2016-03-29 40 views
0

Ich habe dieses Tutorial verwendet http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/ eine Sidebar in meinem _Layout Code zu erstellen. Ich versuche, die Seitenleiste das li -> a -> "Test Sidebar" -Element in der Mitte zu haben. Darf ich fragen, wie reagiere ich darauf? Ich kann es mit einem Randwert einstellen, aber das ist nicht sehr ideal.Zentrieren Anfangsreihe Sidebar Menu

_Layout.cshtml Code

<div class="container"> 
    <ul id="gn-menu" class="gn-menu-main"> 
     <li class="gn-trigger"> 
      <a class="gn-icon gn-icon-menu"><span>Menu</span></a> 
      <nav class="gn-menu-wrapper"> 
       <div class="gn-scroller"> 
        <ul class="gn-menu"> 
         <li class="gn-search-item"> 
          <input placeholder="Search" type="search" class="gn-search"> 
          <a class="gn-icon gn-icon-search"><span>Search</span></a> 
         </li> 
         <li> 
          <a class="gn-icon gn-icon-download">Popular</a> 
         </li> 
         <li><a class="gn-icon gn-icon-cog">Settings</a></li> 
         <li><a class="gn-icon gn-icon-help">About us</a></li> 
        </ul> 
       </div><!-- /gn-scroller --> 
      </nav> 
     </li> 
     <li><a href="http://tympanus.net/codrops">Test Sidebar</a></li> 
     <li></li> 
    </ul> 

    @RenderBody() 
</div><!-- /container --> 
<script src="../../Scripts/classie.js"></script> 
<script src="../../Scripts/gnmenu.js"></script> 
<script> 
    new gnMenu(document.getElementById('gn-menu')); 
</script> 

enter image description here

Codepen http://codepen.io/anon/pen/LNjYJd

+0

nehmen Sie einen Bildausschnitt von dem, was Sie brauchen, zentriert und hinzufügen es in Ihrem Q – Tasos

+0

Okay, es wurde geschrieben – Master

+0

können Sie die Geige oder Codepen geben? – NewbieDeveloper

Antwort

1

einig Schritt u für Ihre Lösung folgen müssen.

1 - float:left von .gn-menu-main > li entfernen und zu .gn-menu-main li.gn-trigger hinzufügen.

2 - Ersetzen display:block-display:inline-block

3 - Hinzufügen text-align:center und font-size:0 (Schriftgröße margen eingestellt) zu .gn-menu-main

4 - Und geben Schrift: Größe entsprechend Ihrem Entwurf li 13px zu .gn-menu-main > li

Probieren Sie diese Schritte können Ihnen helfen hier ist fiddle

+0

ich nur auskommen float: direkt in .gn-menu-main> li: last-kind in der mitte sein letztes kind, wenn du nicht willst, dass das letzte kind in der mitte ist einfach rückgängig es danke –