ヘッダーの画像と文字の高さを揃えたい

SQSPのサイトhttps://creative.squarespace.com/
のコーディングを行っています。

ヘッダー部分に使用されているロゴを画像として切り取り、切り取った画像を使って、ヘッダーを作成しました。しかし、画像とサイト名の高さがずれてしまいました。

調べたところ、高さを揃える方法として
vartical-align:middle;
をimg要素に指定する方法があり、これを実行しましたが、位置は変わりませんでした。なぜでしょうか？

また、他にもposition:absoluteやoverflow:hiddenを使おうとしたのですが、どれもうまくいきませんでした。

対処法を教えていただきたいです。よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="./css/main.css">
8</head>
9<body>
10    <header>
11        <div class="head">
12            <div class="logo"><img src="./img/ロゴ.PNG" alt=""></div>
13            <p>SQSP CREATIVE DEPT.</p>
14        </div>
15    </header>
16  <h1>THE SQSP CREATIVE DEPT.</h1>  
17</body>
18</html>

sass
1.head{
2    margin-left:50px;
3    padding:10px;
4    display:flex;
5    justify-content: left;
6    text-align: center;
7}
8.logo{
9    display:inline-block;
10    padding-top:10px;
11    height: 100%;
12    img{
13        overflow: hidden;
14        vertical-align: middle;
15        height: 50px;
16    }
17
18}
19p{
20    color:black;
21    font-family: sans-serif;
22    font-size: 16px;
23    padding:10px;
24    
25}
26h1{
27    font-family: sans-serif;
28    font-size: 164px;
29}

行動規範の内容に同意します

回答1件

ベストアンサー

以下を追加するとどうなりますか？

css
1.head{
2    align-items: center;
3}

align-items - CSS: カスケーディングスタイルシート | MDN

投稿2020/03/13 09:18

Lhankor_Mhy

総合スコア36074

h_proc

2020/05/24 23:30

ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ヘッダーの画像と文字の高さを揃えたい

関連した質問