テキストと画像の縦揃えCSS
画像をそのまま<img />タグで入れて、それに続けてテキストを入れた場合、通常は以下の図のように表示されます。
これはこれでありだと思いますが、例えばこれを縦方向で中央揃えしたいとします。
その場合は、CSSでvertical-alignプロパティを使用します。
img {
vertical-align: middle;
}これで縦方向中央寄せです。
これはこれで完成です。しかし、vertical-alignプロパティって使える値が多いんですよ。8つもある。多いよ。
この、vertical-alignプロパティって使える値が多くて訳わからなくなるんですよ！という心の住人のキレ気味の文句を受けて、備忘録的に一覧図を置いておくことにします。
ちなみに、vertical-alignプロパティは、インライン要素とテーブルセルにしか使えませんのでご注意あれ。
続きを読む »