当导航栏收缩时，如何将图像居中？

Question

我正在使用一个模板来构建网站（https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template），原始的导航栏看起来像这样：

在缩小之前： 导航栏

在缩小之后： 导航栏

我把logo改成了我的logo。因为我的logo垂直较小，所以我把边距从10px改为20px

.logo {
    width: 40%;
    margin: 20px 0px 20px 0;
}

它看起来像居中了： 导航栏

但是当我向下滚动页面时，导航栏会缩小，我的logo不会保持垂直居中。它会上移。 导航栏

我试图修复css，但是没有效果

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    margin: 20px 0px 20px 0;
}

这是logo的html代码

<div class="logo smooth-scroll">
    <a href="#banner"><img id="logo" src="images/boxinghub.png" alt="boxinghub logo"></a>
</div>

css中的代码控制了缩小时的位置，但是即使我添加了.logo或#logo，也没有帮助。

@media (min-width:768px) {
    .fixed-header-on .navbar-default .navbar-nav > li > a {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

提前感谢您的帮助！

Answer 1

你可以使用背景方法 像background-position:center