javascript - 当导航栏中还有另一个元素时，如何使导航栏中的 Logo 居中？

Question

在我的导航栏中有一个应该居中的 Logo ，以及一个应该向左浮动的菜单按钮图像(3 行)。我已经让菜单按钮向左浮动，但似乎无法让 Logo 位于导航栏的正中心，它总是有点偏右。

我试过将它们放在 div 中并将 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;
 }

Answer 1

添加:左:0；右: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>