如何在导航栏中放置另一个元素的同时在导航栏中放置标志？

在我的导航栏中有一个应居中的标志和一个应该左移的菜单按钮图像（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

如何在导航栏中放置另一个元素的同时在导航栏中放置标志？

回答

相关问题