圖像沒有正確居中

我希望按鈕保持在原來的位置，但要將徽標設置爲與屏幕寬度相關。然而，標誌稍微偏右。我認爲這是由於左側的按鈕。另外，如何將徽標垂直放置在菜單欄中？謝謝你的幫助。圖像沒有正確居中

<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

圖像沒有正確居中

回答

相關問題