line-height指定時のvertical-align自動調整について

Question

下記のような画像とテキストを横並びにした際、

<div>
  <img src="~/assets/image/height_60px.png">
  <span>こんにちは</span>
</div>

テキストを上下中央に揃えようと思うと、
以下のようにline-heightで高さ指定すると、画像に対してテキストが自動で上下中央揃えになるのですが

span {
  line-height: 60px; // 画像の高さ
}

これって絶対にpx指定しなくてはいけないのでしょうか。
100%やautoにしてしまうと、自動での上下中央揃えを行ってくれません。
いちいちpx指定しなくてもよい方法がもしあれば、どなたかご教示いただけませんでしょうか。

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、「画像に対してテキストが自動で上下中央揃え」になりませんでした。

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？

[inudrr]

申し訳ありません、仰って頂いたとおりです。
Nuxt.jsでの開発環境下だったためフレームワーク内にて様々なCSS設定などがデフォルトで組み込まれており、通常の挙動とは異なっていることを認識できず投稿してしまっておりました。

物量が多くすべての状況を本質問へ記載することができないのですが、
基礎的なところが見えなくなっていたことに気づくことができました。
貴重なお時間を割いてのご回答・ご確認をいただきありがとうございました。

Answer 1

以下ではどうでしょうか。

		img,span {
			vertical-align: middle;
		}

imgだけにvertical-align: middleとすると、imgの中心とspanのペースラインがそろうことになりますので、フォントサイズが大きくなると誤差が目立つようになります。

Answer 2

<img> に vertical-align: middle; を指定すればいいんじゃないでしょうか。line-height は不要です。

Comments

[inudrr]

`<span>`へのline-height設定を外し、`<img>`に`vertical-align: middle;`を指定してみたのですが
cssは適用が確認できるものの、テキストが上下中央には揃いませんでした。
ご回答有り難うございます、もう少し確認してみます。

[int32_t]

data:text/html,<div><img src="https://www.google.com/images/logo.png" style="height: 60px; vertical-align:middle;"><span>Hello</span></div>

これで確認しました。

[inudrr]

自分でもcodepenなどで実行し確認してみたところ、ご回答いただいた内容で動作することを確認できました。

申し訳ありません、Nuxt.jsでの開発環境下だったためフレームワーク内にて様々なCSS設定などがデフォルトで組み込まれており、このとおりにはいかなかったようです。
質問時気づかないまま投稿してしまい失礼いたしました。ご確認いただきありがとうございました！