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


<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" />

 

中央寄せの画像(バスケダンクシュート)