カテゴリ: Web制作

【CSS】div内の画像を縦横中央に配置する。

仕事で使ったのでメモ。
こちらの記事を参考にさせて頂きました。

やりたかったのは以下の2点。

  • ひとつのdiv内に1枚画像を配置して同じようなボックスを並べたい。
  • 画像のサイズは様々だけど、div内の縦横中央に配置したい。

単純な問題なんですけど、ググってみてもなかなかちょうどいい解決法が見つからない。
そんな時に、もう本当に求めていたそのまんまの答えを教えてくれたのがこちらの記事でした。 本当に助かりました。

以下、引用。

一応仕様としては
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:table-cell;
    text-align:center;
    vertical-align:middle;
    layout-grid-line:200px;
}

div img {
    vertical-align:middle;
}

こんだけ

ポイントはIE独自仕様のlayout-grid-lineで高さを与えることとdiv内のimgにvertical-alignを与えることの2つ
js使ったりハック使ったりする必要もなくソースも汚れないので
色々と使える小技です

layout-grid-lineの代わりにline-heightを使ってもできるみたい。


« »

購読に便利なRSS登録をどうぞ

RSSリーダーで購読する

ぜひFacebookページにご参加下さい!