More than 3 years have passed since last update.

headerの画像を上下中央寄せする方法

Posted at 2020-07-03

まず、HTMLを記載するとこんな感じです。

<div class="p-header__logo">
  <img src="img/header/logo/logo120.png" alt="">
</div>

.p-header__logo {
   height: 90px;
   display: flex;
   align-items: center;
  & img {
    height: 70px;
    display: block;
    }
}

img要素を囲んでいる親要素に
display: flex;
align-items: center;

を追加すると上下中央揃いになる。