CSSだけで画像を上下中央に配置する « SRC Blog -samurai-rok.com-

久しぶりすぎて若干死に掛けたブログですが たまにはWEB屋らしい情報を 「CSSのみで画像を上下中央に配置する方法」 イメージ的にはこんな感じ HTML5やCSS3の話題で盛り上がってる中今更なネタですが 調べてみると中々バッチリとした答えが見つからないので 書いときます 一応仕様としては 1.HTMLを汚さない、余計なタグは書かない 2.ハックを使わない 3.IE6、IE7、IE8、その他モダンブラウザ対応 4.imgはどんなサイズでも囲うdivの上下中央に配置する こんなとこですかね で早速答えは 【HTML】 <div><img src=”images/src.jpg” alt=”img” width=”100″ height=”50″ /></div> 【CSS】 div { width:300px; height:200px; display:

[tomoworks]

display:table-cellとな。

[Cherenkov]

画像 中央

[aretokore]

>> CSSだけで画像を上下中央に配置する « SRC Blog -samurai-rok.com-

[extra_number]

【HTML】 【CSS】 div { width:300px; height:200px; display:table-cell; text-align:center; vertical-align:middle; layout-grid-line:200px; } div img { vertical-align:middle; }

[mura24]

layout-grid-lineでIE対応

[shu_m]

ありがとうございます。