画像の横のテキストを縦中央にする方法

画像の横のテキストを縦中央にする方法が分かりません。
横並びにしたいh4タグと画像を選択したところ、h4タグの高さが画像と同じ？になっています。
これを解除して縦にセンタリングする方法はありますか？
また、他の別の方法はありますか？

HTML
1     <!------ ヘッダーはじまり----->
2     <header>
3        <div class="contena">
4          
5            <h4><img src="img/logo-white.png" title="MOSHA" alt="画像"class="rogo">MOSHA</h4>
6        <nav>
7          <ul class="mainnav">
8        <li><a href="#">このサイトについて</a></li>
9        <li><a href="#">メニュー</a></li>
10        <li><a href="#">ブログ</a></li>
11        <li><a href="#">アクセス</a></li>
12          </ul>
13        </nav>
14        </div>
15      </header>
16      <!------ ヘッダーおわり----->

CSS
1
2        header{
3            width: 100%;
4            height: 45px;
5            background-color: #574b4b;
6            
7        }
8        
9        .rogo{
10            width: 30px;
11            height: 30px;
12            margin-top: 5px;
13        }
14        
15        /* ヘッダーとリストを横並び */
16        .contena{
17            width: 960px;
18            height: 45px;
19            display: flex;
20            justify-content: space-between;
21            margin: 0 auto;
22            align-items: center;
23            
24            
25        }
26        
27        /* リスト自体を横並び */
28        .mainnav{
29            display: flex;
30            font-size: 12px;
31        }
32        
33        .mainnav li{
34            margin-left: 25px;
35        }
36        
37        .mainnav a{
38            color: rgb(255, 255, 255);
39            text-decoration: none;
40        }
41    
42        h4{
43            color: #ffffff;
44            font-size: 12px;
45        }