Bild ist nicht richtig zentriert

Question

Ich möchte die Schaltfläche bleiben, wo es ist, aber das Logo in Bezug auf die Breite des Bildschirms zentriert werden. Das Logo ist jedoch etwas weiter rechts. Ich denke, es liegt an dem Knopf auf der linken Seite. Wie würden Sie das Logo vertikal in der Menüleiste zentrieren? Danke für Ihre Hilfe.

<div style="position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;"> 
    <button style="width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none; float:left;" onclick="w3_open()">☰</button> 
    <img src="https://nebulon.io/nebulon.png" style="max-height:70px;"> 
</div> 

https://jsfiddle.net/bjLex5qm/1/

Answer 1

Ich setze das Bild position zu absolute und berechne die Mitte mit left:calc(50vw - 50px), oder die linke Position ist die Hälfte des Ansichtsfensters minus Hälfte der Bildbreite.

.container { 
 
    position: fixed; 
 
    display: inline; 
 
    max-width: 100%; 
 
    background-color: white; 
 
    left: 0px; 
 
    top: 0px; 
 
    right: 0px; 
 
    border-bottom: 1px solid #6C7A89; 
 
    text-align: center; 
 
} 
 

 
button { 
 
    width: 80px; 
 
    height: 80px; 
 
    background: transparent; 
 
    border: none; 
 
    font-size: 27px; 
 
    outline: none; 
 
    float: left; 
 
} 
 

 
img { 
 
    max-height: 70px; 
 
    display:block; 
 
    position:absolute; 
 
    left:calc(50vw - 50px); 
 
}

<div class="container"> 
 
    <button onclick="w3_open()">☰</button> 
 
    <img src="https://nebulon.io/nebulon.png"> 
 
</div>

Answer 2

updated the fiddle. check it out. 

jsfiddle link

nahm sich die Freiheit die Stile inline

.header{ 
 
    position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center; 
 
} 
 
.menu{ 
 
    width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none; 
 
    position:absolute; 
 
    left: 0; 
 
} 
 
.logo{ 
 
    max-height:70px; 
 
    
 
}

<div class = 'header'> 
 
    <button style="" onclick="w3_open()" class = 'menu'>☰</button> 
 
    <img src="https://nebulon.io/nebulon.png" class = 'logo'> 
 
</div>

zu entfernen

Answer 3

Verwenden Position absolute und transformiert auf das Bild. Dies würde vertikal und horizontal zentrieren.

img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Answer 4

Die einfachste Lösung ist Tabellen verwenden Sie einfach „vertical-align: middle“ angeben können Eigenschaft in Tabellenzellen und machen den Inhalt vollständig zentriert aussehen.

Bitte beachten Sie den folgenden Code und Fiddle.

<div style="position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <button style="width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none; float:left;" onclick="w3_open()">☰</button> 
 
     </td> 
 
     <td style="width:100%;"><img src="https://nebulon.io/nebulon.png" style="max-height:70px;vertical-align:middle"></td> 
 
    </tr> 
 
    </table> 
 

 

 
</div>