Question

在我的导航栏中，有一个应居中的徽标，以及一个应向左浮动的菜单按钮图像（3行）。我已经让菜单按钮向左浮动，但似乎无法将徽标放在导航栏的确切中心，它始终向右移动。香港专业教育学院尝试将它们放在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

尝试将菜单图标设置为position: absolute;并将其余部分标准化

Answer 2

使用以下可能有帮助

<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位置置于相对位置

Answer 3

已添加：left: 0; right: 0; margin: auto;至#resp-logo

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 4

从＃resp-logo

中删除这些内容

位置：绝对; display：inline;

或者您可以使用边距强制它居中。

当导航栏中的另一个元素也是如何将导航栏中的徽标居中？

4 个答案: