无法将导航栏中的徽标与按钮对齐

Question

我目前正在为我的大学项目创建一个小型网站。我目前遇到一个小问题，我似乎无法修复。

问题在于我为我的网站创建了一个导航栏，徽标位于中央，每侧都有均匀分布的按钮，我面临的问题是按钮没有与徽标对齐它导致导航栏高度增加。我已经提供了问题的图像以及相关部分的HTML和CSS代码。

这是导航栏部分的HTML。

    <nav id="navbar">
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="shop.html">SHOP</a></li>
        <li><a href="forum.html">FORUM</a></li>
        <li><a class="logo" href="index.html"></a></li>
        <li><a href="aboutus.html">ABOUT</a></li>
        <li><a href="contactus.html">CONTACT US</a></li>
        <li><a href="#">BASKET</a></li>
    </ul>
    </nav>

这是CSS

#navbar {
display: block;
text-align: center;
height: 90px;
margin-bottom: 3%;
background-color: #F1F1F1;
}

#navbar ul { 
list-style-type: none;
padding: 0px 0px; 
margin: 0px 0px;
overflow: hidden;
}

#navbar ul li {
display: inline-block; 
}

#navbar ul li a { 
display: inline-block;
padding: 10px 15px; 
width: 95px;
color: #000000;
text-decoration: none;
line-height: 60px; 
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
text-shadow: 0px 0px 0px #000;
}

#navbar .logo {
background: url("../images/logo1.png") 50% 0 no-repeat;
height: 80px;
width: 80px;
padding: 0 0;
margin: 0 0;
}

问题图片：（http://imgur.com/a/Bv4hK）

Answer 1

在导航栏上使用display:flex来解决此问题

#navbar ul {
  list-style-type: none;
  padding: 0px 0px;
  margin: 0px 0px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}