和洋風KAI

【CSS】スタイルシートを使って画像(IMG)を中央揃えにする方法。

まいど!するぷ( @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行で書くときに、どこが上下左右なのか覚える方法。

現役エンジニアのオンライン家庭教師CodeCamp