テキストがそのタグの先頭に付いています

Question

何らかの理由で、下の画像のテキストがコンテナの上部（青色）に貼り付いています。

私はそれは、ロゴと同じ行になりたいです。

CSS：

.Header { 
    background-color: rgb(173, 181, 189); 
    color: white; 
    display: flex; 
    height: 9.6rem; 
    margin: auto; 
    position: relative; 
    width: 75%; 
} 

.Wrapper { 
    align-content: center; 
    display: inline-flex; 
} 

.Logo { 
    height: 3.2rem; 
    display: inline-flex; 
    margin: 3.2rem 0.5rem 3.2rem 3.2rem; 
    position: relative; 
    width: 3.2rem; 
} 

.Title { 
    display: inline-flex; 
    height: 3.2rem; 
    font-family: Verdana; 
    height: auto; 
    margin: 3.2rem 0 3.2rem 0; 
    position: relative; 
    vertical-align: middle; 
} 

HTML：

<header className={css.Header}> 
    <div className={css.Wrapper}> 
     <img src={logo} className={css.Logo} alt="logo" /> 
     <h1 className={css.Title}>List of Participants</h1> 
    </div> 
</header> 

P.S. "あなたの投稿は主にコードであるようですが、詳細を追加してください。"

Answer 1

align-self: centerを追加すると問題が解決します。

.Title { 
    align-self: center; 
    display: inline-flex; 
    height: 3.2rem; 
    font-family: Verdana; 
    height: auto; 
    margin: 3.2rem 0 3.2rem 0; 
    position: relative; 
    vertical-align: middle; 
}