画像が正しく中央揃えされていない

Question

ボタンの位置はそのままにしたいが、画面の幅に合わせてロゴを中央に配置したい。しかし、ロゴはもう少し正しいです。左のボタンが原因だと思う。また、メニューバー内でロゴをどのように垂直に配置するのですか？ご協力いただきありがとうございます。

<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

positionをabsoluteに設定し、left:calc(50vw - 50px)を使用して中心を計算するか、または左の位置がビューポートの半分から画像の幅の半分を引いた値になります。

.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

インラインスタイルを

.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>

を除去するために自由を取りました

Answer 3

使用位置と絶対画像に変換します。これは垂直方向と水平方向の中心になります。 「：真ん中の垂直整列を」表のセル内のプロパティと内容を完全に中央に見えるよう

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

Answer 4

最も簡単な解決策は、あなたが簡単に指定できるテーブルを使用することです。

次のコードと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>