画像の配置 その2

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

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

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

HTML:
    

            
    

fig1

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

HTML:
    

        
    

fig2

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

HTML:
    

        
    

fig3

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

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社