タイトルとフッターの文字の位置を動かしたい

Question

この矢印で刺しているタイトルの文字にmarginが効かない場合どうしたらいいでしょうか。
この場合、いつもpositionで移動しているのですが、なるべくは使わない方法でやりたいと思っています。
ご教授いただければ幸いです。

 <footer>
    <!-- footer 左がわ -->
    <div class="icon">
    <img src="img/seedkun.png">
    <span class="name"><strong>Seed</strong>Kun</span>
    </div>
    <!-- footer　右側 -->
    <a class="footer-right">Copyright(c)Seedkun inc</a>
  </footer>

``
```CSS

footer{
  background-color: #233f51;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 18px;
  padding: 5px 0;
}

footer .footer-right{
  margin-right: 80px;
}

Comments

[kai0310]

HTMLのコードで正しくMarkdownが記述できていない様です。
質問本文は修正できますので、修正してください。

最初のスタイリングCSSに関しては途中からの提示になっておりセレクターが何かわかりません。
また、質問点に該当しているコードでそれだけで再現できる最低限ものを提示していただけるとこちらも回答しやすくなります。

[ShinKoba]

ご回答ありがとうございます。
かしこまりました。一度、訂正して改めて提示させていただきます。

Answer 1

矢印のタイトルを上下中央に配置したいということだと解釈しました。

.icon{ 
  align-items: center;
}

align-items: center; で上下中央寄せしたいのだと思いますが、これは display: flex; とセットで使わないと意味かないです。
下記でタイトルは上下中央に配置されます。

.icon{ 
  display: flex;  
  align-items: center;
}

display: flex;を設定した要素をフレックスコンテナといい、その子要素をフレックスアイテムといいます。
display: flex;はその子要素であるフレックスアイテムのレイアウト・配置を決めるものです。
これを理解しましょう。

Comments

[ShinKoba]

無事、タイトルを中央に配置することが出来ました。
詳しい説明までして頂きありがとうございます。