ｐタグのspanで囲った画像を縦方向に中央寄せしたいです。

Question

前提・実現したいこと

HTML,CSS初心者です。
♡画像の部分を縦方向の中央寄せにしたいのですが、どのように書いたらいいでしょうか？

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

made with ♡ by kinako　　とフッターに表示させているのですが、♡の画像の下部分が文字の下部分と揃ってしまっています。この画像を少し下にずらし、縦方向の中央寄せにしたいのですが。。。実際の画像はこれよりも少し大きいので余計に上部分が出ている感じになってしまいます。

該当のソースコード

HTML
<footer>
<p><small>made with <span><img src="image/hart2.png"></span> by kinako</small></p>
</footer>

CSS

footer {
  background:rgba(168,136,190,0.5);
  text-align:center;
  padding:26px 0;
}
footer p  {
  color:#432;
  font-size:0.875rem;
  
}
footer img {
  height:15px;
}

試したこと

line-height,footer imgにpaddingとmarginをつけてみたり、ネットで調べたflexboxを張り付けてみたりしましたが、お手上げ状態で2時間悩んでいます。
宜しくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

positionを使ってみたら、できると思います。

https://saruwakakun.com/html-css/basic/relative-absolute-fixed#section5

Comments

[kinako3]

ありがとうございます！imgにposition:relative;で解決しました！！