画像とナビを縦中央寄せにしたい

Question

画像とナビをheader内で縦中央寄せにしたいです。

HTML

<header> <div class="wrapper"> <img class="logo" src="images/logo.png"> <nav> <ul class="main-nav"> <li><a href="live.html">LIVE</a></li> <li><a href="bio.html">BIOGRAPHY</a></li> <li><a href="disc.html">DISCOGRAPHY</a></li> <li><a href="movie.html">MOVIE</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </nav> </div> </header>

CSS
html {
font-size: 100%;
}

.wrapper {
max-width: 1100px;
margin: 0 auto;
}

header {
border-bottom: #e5e5e5 1px solid;
height: 70px;

}

header .wrapper{
display: flex;
justify-content: space-between;
align-items: center;
}

main-nav {
list-style:none;
display: flex;
}

.logo {
width: 100px;
}
.main-nav li{
margin-left: 20px;
}

以上のような記述をしているのですが、きちんと縦中央寄せになりません。中央から微妙に上にずれてしまいます。wrapperを外し、headerにflexをかけ、align-items: center;、jutify-content: space-betweenをかけるとうまくいきます。wrapperをかけたまま縦中央寄せにするにはどうすれば良いのでしょうか。

Comments

[yambejp]

手書きでいいので想定する結果を図示ください

Answer 1

.wrapper に height: 100%; を設定して、header の高さに合わせたらどうでしょう。

.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
}

Comments

[k-nirvana-69]

うまくいきました！ありがとうございます。

ちなみになのですが、height: 100%;をかけていない時のwrapperの高さってどうなってるのか教えていただけますでしょうか？

[hatena19]

中身の img要素 または ul要素の高い方の高さになります。

[k-nirvana-69]

ありがとうございます。