2015.07.16

高さが決まっているブロックの中で、画像を上下中央に配置する

高さが決まっていて、そのブロックの中に画像しかない場合は
簡単に上下中央に配置することができます。

HTML

<div class="image-content">
	<img src="img/vertical-align-middle.jpg" width="800" height="424" alt="">
</div>

CSS

.image-content {
	height: 800px;
	line-height: 800px;
}

.image-content img {
	vertical-align: middle;
}

（※上下中央配置に必要なプロパティのみ書き出しました）

サンプルページはこちら
 

画像を囲んだ要素に、行間800pxとして高さと同じ値にします。
そうすると、子である画像要素を「vertical-align」で制御できるようになります。
 
「vertical-align」を「top」とすると上に、「bottom」とすると下に表示されます。