headerのロゴとlistを縦中央揃えにしたい

タイトルの通りではあるんですが、headerのロゴとlistを縦中央揃えにしたいのですが、自分で調べてもうまくいきません。
何かが邪魔をしていたりしてそうなのですが、見当がつきません。
どなたかご教授頂けませんでしょうか。

html
1  <header>
2    <div class="container header-container">
3      <nav class="navbar navbar-expand-lg">
4        <a class="navbar-brand" href="#"><img src="img/aaa.png" alt="aaaロゴ"></a>
5        <div class="collapse navbar-collapse" id="navbarNav">
6          <div class="gh-col">
7            <ul class="navbar-nav">
8              <li class="nav-item">
9                <a class="nav-link padding-derete text-white" aria-current="page" href="#">Classical</a>
10                <span class="header-span">クラシック</span>
11              </li>
12              <li class="nav-item">
13                <a class="nav-link padding-derete text-white" aria-current="page" href="#">Acoustic</a>
14                <span class="header-span">アコースティック</span>
15              </li>
16              <li class="nav-item">
17                <a class="nav-link padding-derete text-white" aria-current="page" href="#">Ukulele</a>
18                <span class="header-span">ウクレレ</span>
19              </li>
20              <li class="nav-item">
21                <a class="nav-link padding-derete text-white" aria-current="page" href="#">Accessories</a>
22                <span class="header-span">アクセサリー</span>
23              </li>
24              <li class="nav-item">
25                <a class="nav-link padding-derete text-white" aria-current="page" href="#">Media</a>
26                <span class="header-span">メディア</span>
27              </li>
28              <li class="nav-item">
29                <a class="nav-link padding-derete text-white" aria-current="page" href="#">About Us</a>
30                <span class="header-span">当社について</span>
31              </li>
32              <li class="nav-item dropdown">
33                <img src="img/Instagram_Glyph_Gradient_RGB.png" alt="Instagram icon"><img src="img/f_logo_RGB-Blue_58.png" alt="facebook icon">
34                <a class="nav-link padding-derete dropdown-toggle text-white" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Language</a>
35                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
36                  <li><a class="dropdown-item" href="#">English</a></li>
37                  <li><a class="dropdown-item" href="#">Japanese</a></li>
38                </ul>
39              </li>
40            </ul>
41          </div>
42        </div>
43      </nav>
44    </div>
45  </header>

css
1header{
2  width: 100%;
3  background-color: #343333;
4  height: 100px;
5}
6.navbar{
7}
8.header-container{
9  display: flex;
10  justify-content: center;
11  align-items: center;
12  flex-wrap:
13}
14.header-span{
15  color: #fff;
16}
17.nav-item{
18  width: 174px;
19}
20.nav-item{
21  font-family: Playfair Display;
22  text-align: center;
23  display: table-cell;
24  vertical-align: middle;
25}
26.nav-link{
27  font-size: 20px;
28}
29.padding-derete{
30  padding: 0 0;
31}
32.header-span{
33  font-size: 14px;
34}
35img{
36  margin-right: 20px;
37}

Lhankor_Mhy

2022/03/01 06:08

Bootstrap を使っていませんか？

shiiiiin.

2022/03/01 08:18

使用しております！

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

回答1件

ベストアンサー

こんな感じでしょうか？

header{
  width: 100%;
  background-color: #343333;
  height: 100px;
}
.navbar{
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
}
.navbar-nav{
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: center;
	justify-content: space-between;
}
.navbar-nav li a{
	display: block;
}
.header-container{
}
.header-span{
  color: #fff;
}
.nav-item{

}
.nav-item{
  font-family: Playfair Display;
  text-align: center;
  vertical-align: middle;
}
.nav-link{
  font-size: 20px;
}
.padding-derete{
  padding: 0 0;
}
.header-span{
  font-size: 14px;
}
img{
  margin-right: 20px;
}

投稿2022/03/01 06:46