在导航中实现垂直对齐徽标[重复]

Posted

技术标签:

【中文标题】在导航中实现垂直对齐徽标[重复]【英文标题】:Materialize vertical aligning logo in nav [duplicate] 【发布时间】:2021-05-30 15:34:19 【问题描述】:

我有一个关于在导航栏中垂直对齐徽标的问题,我给出了 90 像素的高度,但是我无法在中间垂直对齐它。我已经阅读了上一个问题并尝试了一些提供的答案,但没有奏效。我真的很想知道为什么垂直对齐总是如此艰巨的任务。

这是我的代码。

<style>
    nav
        height: 90px;
    
    img#logo
        height: 60px;
    
         
</style>
</head>
<body>
    <nav>
        <div class="nav-wrapper">
          <a href="#" class="brand-logo"><img class="responsive-img" id="logo" src="logos/logo-green.png"/></a>
          <ul id="nav-mobile" class="right">
            <li><a href="sass.html">link A</a></li>
            <li><a href="badges.html">Link B</a></li>
            <li><a href="collapsible.html">Link C</a></li>
            <li><a href="collapsible.html">Link D</a></li>
          </ul>

        </div>
      </nav>
</body>

【问题讨论】:

【参考方案1】:

只需给徽标一些大约 30 像素的内边距

【讨论】:

以上是关于在导航中实现垂直对齐徽标[重复]的主要内容,如果未能解决你的问题,请参考以下文章

使用flex时垂直对齐[重复]

在标题导航栏中垂直居中[重复]

在标题/导航栏中居中徽标[重复]

带有导航栏徽标的引导程序 [重复]

在 Swing 中实现后退按钮功能 [重复]

在 div 中垂直对齐 [重复]