2012年3月12日

【css】とっても簡単に画像を縦横中央寄せする方法

こんにちは。松田です。
最近はスマフォの案件を担当しておりhtmlとjavascriptばっかりいじっています。
先日、開発中のスマフォアプリで異常にメモリが消費される現象が起こり、これがタグの構造が深すぎると起きるのでは無いかという検証を行うために、出来るだけ少ないタグで画像を中央寄せさせたい場面がありました。
そこで弊社デザイナーのkamoさんに頼んだところ、なかなかカッコいい回答が返ってきたのでここに載せてしまいます。

まず画像をdivで囲みます。


<div id="wrapper">
  <a href="https://www.asial.co.jp画像のパス &mode=1" class="popupimg"><img src="https://www.asial.co.jp画像のパス"></a>
</div>

次に以下の様にstyleを設定します。


<style>
#wrapper {
  width:500px;
  height:500px;
  line-height:500px; /* heightと同じ値 */
  text-align:center;
  vertical-align:middle;
}
#center-image {
  vertical-align:middle;
}
</style>

ここまでの状態で表示すると下のようになります。

まだこの段階では縦の中央寄せができていませんね。
ここで、画像の両端に を入れます。


<div id="wrapper">
   &nbsp;<a href="https://www.asial.co.jp画像のパス &mode=1" class="popupimg"><img src="https://www.asial.co.jp画像のパス"></a> &nbsp;
</div>