【Bootstrap/4.4.1/使用】親要素に高さを付与した場合、子要素もその親要素の高さに対して垂直方法に中央揃えを行いたい。

知りたいこと

宜しくお願いします。
タイトルの通りのことは、このコードで達成しているのですが、それはなぜか？知りたいです。
「header」の80pxの高さに対して、垂直方向に中央揃えしたい場合、「.nav-left」にも80pxを設定しないと中央に揃わないのはなぜか？

html
1 <header>
2        <div class="container-fluid">
3        <div class="row main-nav">
4            <div class="col-6 nav-left">
5                <a href="#"><i class="fab fa-airbnb fa-2x"></i></a>
6            </div>
7            <div class="col-6 nav-right">
8                <p>予想月収 <i class="far fa-question-circle"></i></p>
9                <h3><i class="fas fa-yen-sign"></i> 84,697</h3>
10                <button type="button" class="btn btn-danger btn-ignore">はじめる</button>
11            </div>
12        </div>
13        </div>
14    </header>

css
1header {
2  background-color: aquamarine;
3  width: 100%;
4  height: 80px;
5}
6
7.nav-left {
8  height: 80px;
9  display: flex;
10  align-items: center;
11}
12.nav-left a {
13  color: #087D8A;
14}
15
16.nav-right {
17  display: flex;
18  align-items: center;
19  justify-content: flex-end;
20}
21
22.nav-right p {
23  margin-top: 15px;
24  margin-right: 8px;
25  font-size: .875em;
26  color: #575757;
27}
28
29.nav-right h3 {
30  font-size: 24px;
31  color: #575757;
32}
33
34.nav-right button {
35  margin-right: 40px;
36  margin-left: 15px;
37}

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

回答1件

ベストアンサー

.row.main-nav の高さがコンテンツの高さとなるためです。

たとえば、 .nav-left に対する height プロパティを削除した上で、 .row.main-nav へ background-color プロパティを適用すると、なぜ .nav-left へ align-items プロパティを適用しても flex アイテムの位置が変化しないのかが、視覚的にわかりやすいと思います (動作確認用リンク)。

CSS
1header {
2  background-color: aquamarine;
3  width: 100%;
4  height: 80px;
5}
6
7.nav-left {
8  display: flex;
9  align-items: center;
10}
11.nav-left a {
12  color: #087D8A;
13}
14
15.nav-right {
16  display: flex;
17  align-items: center;
18  justify-content: flex-end;
19}
20
21.nav-right p {
22  margin-top: 15px;
23  margin-right: 8px;
24  font-size: .875em;
25  color: #575757;
26}
27
28.nav-right h3 {
29  font-size: 24px;
30  color: #575757;
31}
32
33.nav-right button {
34  margin-right: 40px;
35  margin-left: 15px;
36}
37
38.main-nav { /* 追加 */
39  background: #ffa;
40}