まいど!するぷ( @isloop )です!
ちょっと「賀正!正月はやっぱりおみくじだよね!iPhoneアプリ「日めくりAppBankみくじ」を引いてみた!」の記事を書いた時に、大きなアイコン画像を中央揃えにするのに四苦八苦したので、imgを中央にもってくるハックを書いてみます。(※ ハックいいたかっただけです)
imgに埋め込んだclassを使って画像を中央揃えする方法。
imgタグに埋め込んだclassを使って中央揃えする場合は、こう書くと出来ます。
<img src="icon.jpg" class="appIconBig" />
.appIconBig{ display: block; margin-left: auto; margin-right: auto; }
imgをブロック要素にしてからmargin指定を書くことで中央揃えに出来ます。(display:block;をmarginより先に書くのがコツ。)
imgをdivで囲って画像を中央揃えする方法。
先ほどの方法を使いたくない場合は、imgをdivで囲ってdivにCSSを指定すると上手く中央揃えが可能です。
<div class="center"><img src="icon.jpg" /></div>
.center{ text-align: center; }
どちらの場合でも出来てしまうので、自分に合った方法で画像の中央揃えぜひ試してみてください!
▶ マウスオーバーしたときにカーソルを変更させるCSS
▶ 【CSS】marginとpaddingを1行で書くときに、どこが上下左右なのか覚える方法。