cssで、チェックボックスの画像と隣のテキストがずれてしまう

いつもお世話になっております。
表題の件でどうしても解決できず質問しました。

チェックボックスの画像を挿入し、その並びでテキストを記入したのですが、
その二つがずれてしまって、ガタガタしてしまいます。
解決方法をご存知つの方アドバイスいただければと思います。
htmlは下記の通りです。

html
<p><img src="images/チェックボックス.jpg" alt="チェックボックス"> テキストテキストテキストテキストテキストテキスト</p>

よろしくお願いいたします。

No.2 ベストアンサー 回答者： naokita 回答日時： 2020/10/14 20:50

<p><img src="images/チェックボックス.jpg" alt="チェックボックス" style="vertical-align: middle;"> テキストテキストテキストテキストテキストテキスト</p>

<p style="background: url(images/チェックボックス.jpg) no-repeat 0 50%; padding-left:28px;">テキストテキストテキストテキストテキストテキスト</p>

Pではなく、UL LI構想にする方が良さそうだし、
複数箇所あるのなら、外部CSSにする方が良いでしょうし、
:before でも良いですけどね。

----------------
もし、これらがわからないのなら、チェックボックスの画像作成時に、上でも下でもスペース作って上手く調整して、保存すれば良いのでは？

No.1 回答者： fujillin 回答日時： 2020/10/14 14:48

こんにちは

チェックボックスの画像がどのような位置で作成されているのか不明ですが、高さ関係を揃えたいとのご質問だと思いますので、CSSの「vertical-align」で調整が可能と思います。
https://developer.mozilla.org/ja/docs/Web/CSS/ve …

text-top、text-bottom、middle 等の他に数値でも指定ができますので、微調整も可能と思います。