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

暮らしカテゴリーの変更を依頼記事元:

www.samurai-rock.com

73 usersがブックマークコメント

記事へのコメント10件

注目コメント
新着コメント

tomoworks display:table-cellとな。

CSS
markup

2012/10/09 リンク

Cherenkov 画像中央

2012/09/13 リンク

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

2012/06/20 リンク

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; }

*tips
IE

2012/06/18 リンク

mura24 layout-grid-lineでIE対応

2012/04/04 リンク

shu_m ありがとうございます。

2011/04/19 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

規約違反を報告

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

久しぶりすぎて若干死に掛けたブログですがたまにはWEB屋らしい情報を「CSSのみで画像を上下中央に配... 久しぶりすぎて若干死に掛けたブログですがたまには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: