イメージ画像の横にテキストを配置する際に、文字の表示位置を真中にする

• CSS
• コメント(0)
• 2012年4/18

先日、スマホサイト制作中にはまった事なのですが、イメージ画像の横にテキストを配置したい時にvertical-alignプロパティを使ってもうまく表示位置を真ん中に出来ない事がありました。

上記のようにしたかったので、vertical-alignプロパティのmiddleを使って真ん中にテキストの配置が出来るように指定。

.test img {
vertical-align:middle;
}

がうまくいかず…。middleで真ん中にくるようにしているのになぜ…。
img自体には他にスタイル指定などもしていないのに、中途半端な真ん中配置になってしまったのです…。

という事で色々試してみた結果、この記述だとうまくいきました。

.test img {
vertical-align:-50%;
}

イメージ画像の半分の高さ分をマイナスしてしまうという無理やりな書き方…。
しかもこの書き方だと、テキスト部分が複数行にわたる場合、効果ゼロですｗ

テキスト部分が改行されずに1行で収まる場合は使えるかと思います。
なにかしらうまく配置できる方法はあるかと思うのですが、ひとまずこれで解決。