图像未正确居中

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

updated the fiddle. check it out. 

jsfiddle link

自由移除内联样式

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我将图片position设置为absolute并使用left:calc(50vw - 50px)计算中心，或左侧位置是视口的一半减去图像宽度的一半。

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用绝对位置并在图像上进行变换。这将垂直和水平居中。

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

Answer 4

最简单的解决方案是使用表格，您可以在表格单元格中轻松指定“vertical-align：middle”属性，并使内容看起来完全居中。

请参阅以下代码和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>