画像の配置　その３

画像の配置(HTML／CSS)その3

こんにちは。すーさんです。
今回は画像とテキストの位置調整についてまとめてみます。

○画像の上下中央にテキストを配置する(1行の場合)
CSS：
    .box img {
        vertical-align: middle;
    }

HTML：
    

        テキストテキストテキスト
    

○画像の上下中央にテキストを配置する(複数行の場合)
CSS：
    .box p {
        display:inline-block;
        vertical-align: middle;
    }

HTML：
    

上揃え／下揃えの場合は、CSSを以下のように記載すると配置できます。
○上揃えの場合
    vertical-align: top;

○下揃えの場合
    vertical-align: bottom;

今まで画像やテキストの配置について紹介してきましたが、状況によっては紹介した方法ではうまくいかない場合もあると思います。
もしそういう状況に対応することがあったら、その時の対処方法について別途紹介したいと思います。