webデザインでレスポンシブが一般化してからは、スマホでの縮尺変化による見にくさ、高速化の観点から「デザイン画像」が使われなくなってきました。

CSS等の進化でビジュアル面も画像を使わなくても表現できることで、「デザイン画像」を使う頻度も減りましたが、どうしても画像でなくては表現できない場合もあります。

例えばロゴマーク等です。

webデザインではロゴマークの横に社名等を記述するケースは多々あります。
ところが、意外と画像の横にテキストを並べるのは難しかったりします。

小さい画像ならばそんな気になりませんが、ある程度大きい画像になると縦位置がそろわない表示になります。
そこで、画像とテキストを横並び縦中央で揃える方法について改めて調べました。

現象はこのような感じです。

画像とテキストを何も考えず横並びにしてみたところ、このような感じになりました。

ロゴテキスト

画像の横にテキストを並べると、「下揃え」になってしまいました。
ソースは以下の通りです。

<style type="text/css">
h1
{
	font-size: 60px;
	color: #F00;
	font-weight: bolder;
}
</style>
<h1><img src="https://office-obata.com/php/05/images/logo.gif" width="318" height="366">ロゴテキスト</h1>

まずh1タグの縦位置を中央揃えにしてみました。

縦中央にするCSSの命令語として「vertical-align」があります。
主にTDタグで縦中央揃えに使います。

h1タグに縦中央揃えとしてつかるのか？
という疑問はありましたが、とりあえず試してみました。
それがこちらです。

ロゴテキスト

症状はかわらず、下揃えのままでした。
ソースはこちら。

<style type="text/css">
h1
{
	font-size: 60px;
	color: #F00;
	font-weight: bolder;
	vertical-align: middle;
}
</style>
<h1><img src="https://office-obata.com/php/05/images/logo.gif" width="318" height="366">ロゴテキスト</h1>

テキスト中央揃えだけでは上手くいかず。

テキストタグ（h1タグ）を縦中央揃えにすればうまくいくと思ったのですが、現象は改善しませんでした。
通常はこれでうまくいくケースもあると思ったのですが・・・

ただ、ここであることに気が付きました。
画像の縦位置ずれを補正するために、imgタグの縦中央を「下揃え」にしていました。

もしかしたら、imgタグも中央揃えにしたら上手くいくのではないかと思いました。
そこで、imgタグも縦中央にしてみました。
それがこちらです。

ロゴテキスト

あっさり上手く縦中央で揃いました。
ソースはこちらです。

<style type="text/css">
h1
{
	font-size: 60px;
	color: #F00;
	font-weight: bolder;
	vertical-align: middle;
}
h1 img
{
	vertical-align: middle;
}
</style>
<h1><img src="https://office-obata.com/php/05/images/logo.gif" width="318" height="366">ロゴテキスト</h1>
<br><br><br><br>

今度はうまくいきました。

画像とテキストを横並び縦中央に揃えるのは、普通はCSS設定しなくてもデフォルトでそうなっているのかもしれません。

しかし、私はCSSの初期設定で画像を「下揃え」にしていたため、なかなか縦中央にそろわなかっただけでした。
人によってはそんなに迷われないことだったのかもしれません。

正直、こんな簡単なことがなかなか出来ないのか不思議でした。
それは、CSSを設定しすぎていたことが原因でした。

そういう意味では勉強になった現象でした。