与导航栏中文本行高相同的徽标图像

问题描述

我正在尝试将我的徽标与导航栏中的文本置于同一行高。这是我的意思的一个例子：https://try.talkspace.com

但是我的标志会掉到导航栏的底部： My navbar

它不是徽标的大小，因为我尝试了一个非常小的徽标，并且它到了底部。我还尝试为它创建单独的徽标类，vertical-align: middle 并尝试将其居中。

       <!-- Navigation Bar -->
       <div class="nav_main">
        <h2 class="nav_main_logo"><img src="fca.svg" class="nav_main_logo"></h2>
         <input type="checkBox" id="chk">
          <label for="chk" class="show-menu-btn">
           <i class="fa fa-bars"></i>
          </label>
           <ul class="nav_menu_main">
             <a href="#">Home</a>
             <a href="#">Services</a>
             <a href="#">Resources</a>
             <a href="#">Employment</a>
             <a href="#">The Team</a>
             <label for="chk" class="hide-menu-btn">
               <i class="fa fa-times"></i>
             </label>
           </ul>
         </div>



 @import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.nav_main {
  height: 100px;
  background-color: #fff;
  padding: 0 20px;
  color: red;
}
.nav_main_logo {
  line-height: 100px;
  float: left;
  text-transform: uppercase;
  vertical-align: middle;
}
.nav_menu_main {
  float: right;
  line-height: 100px;
}
.nav_menu_main a {
  color: #005368;
  text-transform: uppercase;
  padding: 0 10px;
  transition: 0.4s;
  font-family: 'Sriracha',cursive;
}
.show-menu-btn,.hide-menu-btn {
  transition: 0.4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
.show-menu-btn {
  float: right;
}
.show-menu-btn i {
  line-height: 100px;
}

/* Todo: Active tab
.nav_menu_main a.active
Todo: .hover */

.show-menu-btn:hover,.hide-menu-btn:hover {
  color: blue;
}

#chk {
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

@media screen and (max-width:800px) {
  .show-menu-btn,.hide-menu-btn {
    display: block;
  }
  .nav_menu_main {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #333;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
  }
  .nav_menu_main a {
    display: block;
    padding: 20px;
  }
  .hide-menu-btn {
    position: absolute;
    top: 40px;
    right: 40px;
  }
  #chk:checked ~ .nav_menu_main {
    right: 0;
  }
}

解决方法

尝试在 inline-block 或 inline 上显示，然后在 vertical-align: middle 上显示 nav_main_logo。 这通常可以解决我的问题。