当导航栏收缩时,如何将图像居中?
P粉647504283
P粉647504283 2023-08-18 11:05:33
0
1
422

我正在使用一个模板来构建网站(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代码

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

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

提前感谢您的帮助!

P粉647504283
P粉647504283

全部回复 (1)
P粉898049562

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

    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!