垂直居中 Navbar UL 项目的困难

Question

首先，我是前端新手。抱歉给您带来不便。

我在将 Navbar UL 垂直居中时遇到了一些困难。例如，请注意徽标正确地垂直居中。但是，UL 项目略高于中心垂直轴。

代码段 link: https://codepen.io/samuluizzz/pen/YzeyNgr

HTML:

    <nav class="navbar">
        <a href="index.html"><img style="border-style: solid; border-width: 1px black; border-radius: 50%" src="img/logo-navbar.png" height="60" width="60"></a>
        <div class="menu">
            <ul class="list">
                <li><a href="#info">info</a></li>
                <li><a href="#aboutus">about us</a></li>
                <li><a href="#share">share</a></li>
                <li><button type="button" class="btn btn-dark"><a href="#quiz">quiz</a></button></li>
            </ul>
        </div>
        <button class="btn" id="toggler"><i class="fa-solid fa-bars"></i></button>
    </nav>

CSS:

 .navbar { 
     display: flex; 
     flex-wrap: wrap; 
     align-items: center; 
     justify-content: space-between; 
     background-color: white; 
     padding: 15px; 
     border-bottom: dotted 1px rgba(0, 0, 0, 0.25); 
 } 
 .navbar .logo { 
     margin-right: 50px; 
 } 
 .navbar .list{ 
     display: flex; 
     align-items: center; 
     list-style: none; 
     gap: 25px; 
 } 
 .navbar a{ 
     text-decoration: none; 
     color: inherit; 
 } 
 .navbar a:hover{ 
     color:slategray; 
 } 
 #toggler, 
 .navbar i { 
     display: none; 
 }

Answer 1

您正在使用一个库或具有 reboot 文件的东西

基本上这些文件是为了修复不需要的默认值，但你的重启很奇怪，它在你的 ul 元素中添加了一个 margin-bottom 导致了你的问题

ul{
    margin-bottom: 0;
}

或

.list{
    margin-bottom: 0;
}

会修复它

======更新=======

我已经在 jsFiddle 中测试了你的代码，没有任何问题！

https://jsfiddle.net/mahdiar_mansouri/wj2uf49y/3/

在这里你可以自己检查一下，所以在你自己的浏览器中测试它并检查你的 ul.list 如果它有那个边距，删除它并让我知道否则

垂直居中 Navbar UL 项目的困难

Difficulties in centering the Navbar UL items vertically

html

css

alignment

navbar

center