如何在導航欄中放置另一個元素的同時在導航欄中放置標誌？

在我的導航欄中有一個應居中的標誌和一個應該左移的菜單按鈕圖像（3行）。我得到了菜單按鈕向左浮動，但似乎無法讓徽標位於導航欄的正中間，它總是在右側。我試圖puttin他們都在divs和div寬度設置爲50％，然後漂浮圖像左側，使它居中，但沒有運氣。如何在導航欄中放置另一個元素的同時在導航欄中放置標誌？

HTML：

<div id="resp-navbar"> 
    <div id="resp-nav-contents"> 
     <img id="exp-menu-img" src="3lines.png"> 
     <img id="resp-logo" src="MSLOGO.jpg"> 
    </div> 
</div>

CSS：

#resp-navbar{ 
    height: 15%; 
    text-align: center; 
    width: 100%; 
    display: inline-block; 
    position: fixed; 
    z-index:51; 
    background-color: white; 
    border-bottom: solid; 
    border-width: 1px; 
    border-color: #afafaf; 

} 

#resp-nav-contents{ 
    min-width: 300px; 
} 

#exp-menu-img{ 
    height: 30%; 
    position: absolute; 
    left: 2%; 
    top: 50%; 
    transform: translateY(-50%); 
    opacity: 0.4; 
    cursor: pointer; 
} 

#resp-logo{ 
    height: 50%; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    display: inline; 
}

來源

2017-09-21 AbuN2286

補充：left: 0; right: 0; margin: auto;到#resp-logo

#resp-navbar{ 
 
    height: 15%; 
 
    text-align: center; 
 
    width: 100%; 
 
    display: inline-block; 
 
    position: fixed; 
 
    z-index:51; 
 
    background-color: white; 
 
    border-bottom: solid; 
 
    border-width: 1px; 
 
    border-color: #afafaf; 
 

 
} 
 

 
#resp-nav-contents{ 
 
    min-width: 300px; 
 
} 
 

 
#exp-menu-img{ 
 
    height: 30%; 
 
    position: absolute; 
 
    left: 2%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    opacity: 0.4; 
 
    cursor: pointer; 
 
} 
 

 
#resp-logo { 
 
    height: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    display: inline; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div id="resp-navbar"> 
 
    <div id="resp-nav-contents"> 
 
     <img id="exp-menu-img" src="https://placehold.it/20x20"> 
 
     <img id="resp-logo" src="https://placehold.it/500x100"> 
 
    </div> 
 
</div>

來源

2017-09-21 13:20:31 UncaughtTypeError

非常感謝您！完美地工作！ – AbuN2286

嘗試設置菜單圖標爲position: absolute;和規範休息

來源

2017-09-21 13:08:03 SubjectDelta

使用它可以幫助

<div id="resp-navvar> 
    <img id="exp-menu-img" src="3lines.png"> 
    <img id="resp-logo" src="MSLOGO.jpg">

以下

#resp-logo { 
positions:absolute; 
left:50%; 
Transform:translate(-50%);

寬度 - 定製，高度 - 定製 }

不要忘了把根DIV位置相對，如果事情不工作

來源

2017-09-21 13:16:46 saidutt

從＃RESP-標誌

刪除這些

position：absolute;顯示：內聯;

或者您可以使用邊距強制它居中。

來源

2017-09-21 13:20:26

如何在導航欄中放置另一個元素的同時在導航欄中放置標誌？

回答

相關問題