画像の配置 その２

こんにちは。すーさんです。

前回に引き続き、画像の配置についてまとめておきたいと思います。
前回は余白の削除でしたが、今回は位置の調整について記載します。
※参考図は位置が分かりやすいようにdivに枠線をつけています。

○画像を上下中央に配置する
CSS：
    .box {
        display:table-cell;
        vertical-align: middle;
    }

HTML：
    

○画像を左右中央に配置する
CSS：
    .box {
        text-align: center;
    }

HTML：
    

○画像を上下左右中央に配置する
CSS：
    .box {
        display:table-cell;
        vertical-align: middle;
        text-align: center;
    }

HTML：
    

前回と今回は画像のみの位置調整でしたが、次回は画像とテキストの位置調整についてまとめようと思います。