Center Logo im Menü

Wie erstelle ich diesen zentralen Logo-Effekt für ein position:fixed Menü? Der Code-Versuch ist unten. Gibt es eine bessere Möglichkeit, dies über Bootstrap oder ein anderes Framework zu tun?Center Logo im Menü

#menuContainer{position:fixed; width:100%; background-color:red} 
 
#menu img{height:4%; background-color:red; border-radius:100%; padding:5px} 
 
#menu{margin-left:auto; margin-right:auto;}

<div id="menuContainer"> 
 
     <table id="menu"> 
 
     <tr> 
 
     <td>left</td> 
 
     <td><img src="http://downloadicons.net/sites/default/files/headset-icon-83935.png" ></td> 
 
     <td>right</td> 
 
     </tr> 
 
     </table> 
 
    </div>

Quelle

2017-03-19 Wickey312

Ihr Versuch scheint so gut wie es nur geht. Ich habe nicht genug Erfahrung mit Bootstrap. Ich weiß, dass die Einführung einer Javascript-Schicht zur Steuerung Ihres CSS Ihre Prozesszeit technisch länger und daher weniger effizient macht. Fügen Sie einfach einen Rand der Menügröße zu dem hinzu, was das Menü enthält, und Sie sind golden. –

Ich habe Ihren Code aktualisiert, und hier ist der Link zu jsfiddle

css:

#menuContainer{position:fixed; width:100%; background-color:red} 
    #menu img{height:4%; background-color:red; border-radius:100%; padding:5px} 
    #menu{margin-left:auto; margin-right:auto;} 

    #menu .menu-logo img{ 
     padding:10px; 
     border-radius: 50%; 
     background:red; 
     margin-bottom:-20px; 
    }

html:

<div id="menuContainer"> 
      <table id="menu"> 
      <tr> 
      <td>left</td> 
      <td class="menu-logo"><img src="http://downloadicons.net/sites/default/files/headset-icon-83935.png" ></td> 
      <td>right</td> 
      </tr> 
      </table> 
     </div>

Quelle

2017-03-19 10:39:47 gudboisgn

Center Logo im Menü

Antwort

Verwandte Themen