Wie zentriere ich das Logo in der Navigationsleiste, wenn auch ein anderes Element in der Navigationsleiste angezeigt wird?

Question

In meiner Navigationsleiste gibt es ein Logo, das zentriert sein sollte, und ein Menü-Button-Bild (3 Zeilen), das links schweben sollte. Ich habe die Menü-Taste, um nach links zu schweben, aber ich kann einfach nicht scheinen, dass das Logo genau in der Mitte der Navbar ist, es ist immer ein bisschen nach rechts. Ich habe versucht, sie beide in divs setzen und div Breite auf 50%, dann schweben das Bild links, so dass es zentriert macht, aber kein Glück.

HTML:

<div id="resp-navbar"> 
    <div id="resp-nav-contents"> 
     <img id="exp-menu-img" src="3lines.png"> 
     <img id="resp-logo" src="MSLOGO.jpg"> 
    </div> 
</div> 

CSS:

#resp-navbar{ 
    height: 15%; 
    text-align: center; 
    width: 100%; 
    display: inline-block; 
    position: fixed; 
    z-index:51; 
    background-color: white; 
    border-bottom: solid; 
    border-width: 1px; 
    border-color: #afafaf; 

} 

#resp-nav-contents{ 
    min-width: 300px; 
} 

#exp-menu-img{ 
    height: 30%; 
    position: absolute; 
    left: 2%; 
    top: 50%; 
    transform: translateY(-50%); 
    opacity: 0.4; 
    cursor: pointer; 
} 

#resp-logo{ 
    height: 50%; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    display: inline; 
} 

Answer 1

Hinzugefügt: left: 0; right: 0; margin: auto; zu #resp-logo

#resp-navbar{ 
 
    height: 15%; 
 
    text-align: center; 
 
    width: 100%; 
 
    display: inline-block; 
 
    position: fixed; 
 
    z-index:51; 
 
    background-color: white; 
 
    border-bottom: solid; 
 
    border-width: 1px; 
 
    border-color: #afafaf; 
 

 
} 
 

 
#resp-nav-contents{ 
 
    min-width: 300px; 
 
} 
 

 
#exp-menu-img{ 
 
    height: 30%; 
 
    position: absolute; 
 
    left: 2%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    opacity: 0.4; 
 
    cursor: pointer; 
 
} 
 

 
#resp-logo { 
 
    height: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    display: inline; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div id="resp-navbar"> 
 
    <div id="resp-nav-contents"> 
 
     <img id="exp-menu-img" src="https://placehold.it/20x20"> 
 
     <img id="resp-logo" src="https://placehold.it/500x100"> 
 
    </div> 
 
</div>

Answer 2

Versuchen Sie das Menüsymbol als position: absolute; Einstellung und der Rest

Answer 3

Verwenden Sie die folgende normalisieren, die

<div id="resp-navvar> 
    <img id="exp-menu-img" src="3lines.png"> 
    <img id="resp-logo" src="MSLOGO.jpg"> 

helfen kann

#resp-logo { 
positions:absolute; 
left:50%; 
Transform:translate(-50%); 

Weiten- Gewohnheit, höhen- benutzerdefinierte }

Vergessen Sie nicht die Wurzel div Position relativ zu setzen, wenn die Dinge nicht

Answer 4

diese entfernen von # bzw.-Logo

Position: absolut; Anzeige: Inline;

Oder Sie können erzwingen, dass er mithilfe von Rändern zentriert wird.