图像没有正确居中

我希望按钮保持在原来的位置，但要将徽标设置为与屏幕宽度相关。然而，标志稍微偏右。我认为这是由于左侧的按钮。另外，如何将徽标垂直放置在菜单栏中？谢谢你的帮助。图像没有正确居中

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

来源

2017-09-23 user3080315

我将图像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>

来源

2017-09-23 16:04:39 jfeferman

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>

来源

2017-09-23 16:00:10

使用位置绝对和转换图像上。这将垂直和水平居中。

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

来源

2017-09-23 16:13:17 SLL

最简单的解决方案是使用表，你可以很容易地指定“垂直对齐：中间”，在表格单元格属性，使内容看起来完全居中。

请参考下面的代码和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>

来源

2017-09-23 19:59:12

图像没有正确居中

回答

相关问题