本文中の画像を中央に寄せる

このサイトでは１記事に必ず一つは画像を入れるようにしています。しかし、ただ画像タグを記入しただけだと左寄せで表示されます。

<img src="http://www.snizm.com/img/a2011110603.jpg" alt="バスケ試合前の円陣" />

↑のように記述しただけだと↓こんな感じで左寄せで表示されます。

そこでCSSに以下のような記述を追加。

.alc {
display: block;
margin-left: auto;
margin-right: auto;
}

その上で記入する画像タグにclass=”alc”を指定します。

<img src="http://www.snizm.com/img/a2011110604.jpg" alt="チアリーダーの円陣" class="alc" />

すると↓のように真ん中に表示されるようになります。

枠線の表示と合わせて記述しておけばセンタリングと枠線が同時に表現されます。

.conimg{
margin: 10px auto 10px auto;
padding: 1px;
border: 1px solid #666;
display: block;
}

<img src="http://www.snizm.com/img/a2011110605.jpg" alt="バスケダンクシュート" class="conimg" />