nav标签里的链接文本如何与图片对齐

问题遇到的现象和发生背景

nav链接文本不能和图片对齐

用代码块功能插入代码,请勿粘贴截图
<div class="sitemenu">
      <nav>
        <a href="/" class="sitemenu-logo">
          <img
            src="../inara-offical/INARA - Elite_Dangerous companion_files/inaramenulogo.png"
          />
        a>
        <a href="/elite" class="sitemenu-elite">Elite:Dangerousa>
        <a href="/morps" class="sitemenu-morps">MMo.RPG.SPACEa>
      nav>
    div>


div.sitemenu {
    position: relative;
    width: 100%;
    min-width: 310px;
    min-height: 40px;
    z-index: 889;
    line-height: normal;
    background: #2e2e2e;
  }
  
  div.sitemenu nav {
    position: relative;
    width: 100%;
    z-index: 889;
    line-height: 24px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    /*padding-left: $imgmenulogowidth + 15px + 30px;*/
    box-sizing: border-box;
  }
  
  div.sitemenu a {
    position: relative;
    padding: 8px 20px;
    display: inline-block;
    text-decoration: none;
    color: #c5c5c5;
    font-size: 13.5px;
    font-family: inherit;
    box-sizing: border-box;
  }

运行结果及报错内容

img

我的解答思路和尝试过的方法

使用margin可以对齐图片和文本,但似乎原代码不是用margin来调的。这个效果是在INARA网站看的的,css原代码如上,奇怪的是仍然不能对齐

我想要达到的结果

img

好吧,可以用vertical-align:middle解决。因为之前用vertical-align:top不起作用,而这时候还不知道有middle,打扰大家了

给图片css加vertical-align:bottom就行了。
有帮助的话采纳一下哦!关于这个属性可以看我总结的这篇博客:
https://blog.csdn.net/qq_57421630/article/details/122923301?app_version=5.9.0&code=app_1562916241&csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22122923301%22%2C%22source%22%3A%22qq_57421630%22%7D&uLinkId=usr1mkqgl919blen&utm_source=app