文字粘貼到其標籤的頂部

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> 

附：文字擺脫「看起來你的文章主要是代碼;請添加一些更多的細節。」

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; 
}