ヘッダーのメニューの横に画像を表示したい

Question

###前提・実現したいこと
html初心者です。初歩的な質問申し訳ございません。
ヘッダーのメニューを作成しているのですが、
画像のようにメニューの横にプロフィール画像を表示させたいです。
メニューとアイコンを同じaタグで括っているのですがどんなに画像のサイズを変更しても
高さのズレが生じてしまいます。

メニューの文字とアイコンを同じ高さに並べつつ、他のメニューとも高さを合わせて並べるにはどうすればよいでしょうか？

マークアップのやり方を教えていただけると幸いです。

###該当のソースコード

<header>
<div class="header-container">
    <a class="logo" href="#">
    <img src="#" width="140">
    </a>
    <nav>
        <ul>
            <li><a href="#">メニュー１</a></li>
            <li><a href="#">メニュー２</a></li>
            <li><a href="#">メニュー３</a></li>
            <li><a href="#">メニュー４</a></li>
            <li><a href="#">メニュー５<img src="https://lh3.googleusercontent.com/JPsTQ5BvV2HqYVc78HmotshsTZGJcY43IGdARHGYaYsUT3QOyaKpxkBR2JWM2cy31YW2=w300" width="30" style="border-radius: 50%"></a></li>
        </ul>
    </nav>
</div>
</header>

@charset "utf-8"

* {
  list-style-type: none;
}

body {
  font-size: 14px;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #ccc;
}


header {
  padding: 0;
  height: 45px;
  width: 100%;
  background-color: #fff;
  min-width: 1085px;
}

header .header-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  width: 80%;
  height: 45px;
  margin: 0 auto;
}

header nav {
  margin: auto 0;
}
header nav ul {
  padding: 0;
  display: flex;
}
header nav ul li {
  list-style-type: none;
  position: relative;
}

header nav ul li a {
  display: inline-block;
  font-size: 0.9rem;
  color: #000;
  text-decoration: none;
  padding: 0 7px;
}

##補足情報(言語/FW/ツール等のバージョンなど)
メニューとアイコン画像は同じaタグで囲みたい。
border-radius:50%で画像を丸くしています。

Answer 1

header nav ul li a {
    position: relative;
}
header nav ul li a img {
    position: absolute;
    top:.5em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
```**動くサンプル：**[https://jsfiddle.net/gsasyhru/](https://jsfiddle.net/gsasyhru/)