ＨＴＭＬにおいて画像配列を修正、配置調整を行いたい

Question

前提・実現したいこと

HTML/CSSにて簡易的なポートフォリオの作成練習をしています。

発生している問題・エラーメッセージ

SNS関連のアイコンを等間隔で配列したいのですが、(練習にて、Twitter,Instagram,noteを配列）
うまく配列する事ができません。noteだけが、うまく並ばないです。
下部の画像のような状態となっています。

何卒宜しくお願い致します。
一応ですが、現在のコードが下記になります。

該当のソースコード

##【HTML】

<footer> <div class="contact">

 <h2>CONTACT</h2>
 <p>お問い合わせは下記のフォームorSNSよりご連絡ください</p>
 
 <!--Twitter-->

<div class="sasami"> <div class ="twitter"> <li> <a> <img src="img/twitter-square.png" width=80 height=80 alt="Twitterサイトへのリンク"> </a> </li> </div>

    <!--Instagram-->
    <div class="instagram">
      <li>
        <a>
          <img src="img/instagram.png"  width=80 height=80 alt="instagramへのリンク">
        </a>
      </li>
    </div>
    <!--note高さが揃わない-->
        <a href="https://note.mu/xxxxx">
          <img src="img/logo-tagline.png"  width=80 height=45 alt="noteサイトへのリンク">
        </a>

  </div>
  <p>sasami.com</p>

</div> </footer>

##【CSS】

.contact {
text-align:center;
background-color:skyblue;
list-style: none;
}
.twitter{
list-style:none;
}
.instagram{
padding-bottom:20;
}
.sasami{
justify-content:center;
flex-direction:center;
position:relative;
display:inline-flex;
}
.sasami p{
font-size:35px;
}

Answer 1

解決済みですか、たまたま通りかかったので、、、

垂直位置以外のレイアウトはフレックスボックスの機能を使っているので、垂直位置もフレックスボックスの機能を使えばいいのでは。

.sasami{
  justify-content:center;
  /* flex-direction:center; こんな設定値はない*/
  flex-direction: row; /*初期値なのでなくてもよい*/
  position:relative;
  display:inline-flex;
  align-items: center; /*追加*/
}

Answer 2

HTML

<!--note高さが揃わない-->
<div class="note">
<a href="https://note.mu/xxxxx">
<img src="img/logo-tagline.png"  width=80 height=45 alt="noteサイトへのリンク">
</a>
</div>

CSS

.note{
padding-top: 17px;
}

あるいはテーブルで定義してしまって、
vertical:middleを使う手もありかもしれません。。

Comments

[sasamiwarabi]

すみません、ありがとうございました。paddingであっさり配置調整できました。
今後とも何卒宜しくお願い致します。