Asial Blog

Recruit! Asialで一緒に働きませんか?

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

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


まず画像をdivで囲みます。
  1. <div id="wrapper">
  2.   <img src="画像のパス" id="center-image" />
  3. </div>


次に以下の様にstyleを設定します。
  1. <style>
  2.  
  3. #wrapper {
  4.   width:500px;
  5.   height:500px;
  6.   line-height:500px; /* heightと同じ値 */
  7.   text-align:center;
  8.   vertical-align:middle;
  9. }
  10.  
  11. #center-image {
  12.   vertical-align:middle;
  13. }
  14.  
  15. </style>


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


まだこの段階では縦の中央寄せができていませんね。
ここで、画像の両端に&nbsp;を入れます。
  1. <div id="wrapper">
  2.   &nbsp;<img src="画像のパス" id="center-image" />&nbsp;
  3. </div>


これで表示すると、



見事に縦横共にセンタリングされました!
ささっと表示を整えたい時に使えるので試してみてはいかがでしょうか。

コメント

  • 古いタイプのコーダー

    ie6を切り捨てるとOKですが…そもそも空のタグや&nbsp;などを入れること自体かなり抵抗がある古いタイプのコーダーです( ̄^ ̄ゞ
    なので素直にjavascript使ってます。
    ie6.7を切り捨てていい案件の場合は普通にdisplay:table-cell;を使ってます。

  • No-Delay

    大変参考になりました。「display:table-cell;」を使った方法は強引な感じで避けて
    いましたが、この方法なら良い感じです。HTML構造によっては「&nbsp」があると
    内包要素が消えたり、「&nbsp」がなくても問題ないのでスタイル記述のみで実現
    できました。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事