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

Question

知りたいこと

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

 <header>
        <div class="container-fluid">
        <div class="row main-nav">
            <div class="col-6 nav-left">
                <a href="#"><i class="fab fa-airbnb fa-2x"></i></a>
            </div>
            <div class="col-6 nav-right">
                <p>予想月収 <i class="far fa-question-circle"></i></p>
                <h3><i class="fas fa-yen-sign"></i> 84,697</h3>
                <button type="button" class="btn btn-danger btn-ignore">はじめる</button>
            </div>
        </div>
        </div>
    </header>

header {
  background-color: aquamarine;
  width: 100%;
  height: 80px;
}

.nav-left {
  height: 80px;
  display: flex;
  align-items: center;
}
.nav-left a {
  color: #087D8A;
}

.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-right p {
  margin-top: 15px;
  margin-right: 8px;
  font-size: .875em;
  color: #575757;
}

.nav-right h3 {
  font-size: 24px;
  color: #575757;
}

.nav-right button {
  margin-right: 40px;
  margin-left: 15px;
}

Answer 1

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

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

header {
  background-color: aquamarine;
  width: 100%;
  height: 80px;
}

.nav-left {
  display: flex;
  align-items: center;
}
.nav-left a {
  color: #087D8A;
}

.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-right p {
  margin-top: 15px;
  margin-right: 8px;
  font-size: .875em;
  color: #575757;
}

.nav-right h3 {
  font-size: 24px;
  color: #575757;
}

.nav-right button {
  margin-right: 40px;
  margin-left: 15px;
}

.main-nav { /* 追加 */
  background: #ffa;
}

Comments

[Yuji17]

いつも教えて下さって、ありがとうございます。
こういうものの場合、そういうものと言われればそれまでだと思うのですが、
ググってもあまり正しい理解が得られなかったので、とても助かりました。