画像のセンタリング方法についての備忘録です。Markdown記法をキッカケに省力化を図る一環として余計なコードを省略することを目指しており、センタリング指定方法を変えました。
わたしは画像をセンタリングで揃えたいタチです。以前は<center>要素を使っていましたが、排除勧告が出ていてレガシィ化することが分かっているため数年前から<p>要素や<div>要素のブロック要素を使い、たとえば、以下のようにtext-alignプロパティで画像をセンタリングしています。
|
1 2 3 |
<div style="text-align:center"> <img width="300" src="http://a1363.phobos.apple.com/us/r30/Purple/v4/dd/e8/42/dde842ac-c749-c04b-58a6-474b67f3931f/mzl.emtmvbzf.png"> </div> |
これまで<img>要素はインライン要素のためブロックレベル要素の中でしかセンタリングできないものと思っていましたが、displayプロパティを使うことによってブロックレベル要素へ変換できることがわかったため以下のようにしました。
|
1 |
<img width="300" style="display:block;margin:auto" src="http://a1363.phobos.apple.com/us/r30/Purple/v4/dd/e8/42/dde842ac-c749-c04b-58a6-474b67f3931f/mzl.emtmvbzf.png"> |
ここでtext-alignプロパティは使えないので、marginプロパティ（またはmargin-rightとmargin-leftの両方同時）にautoを指定することでセンタリングの効果が得られます。
わたしの場合、画像はFlickrに集約しているので以下のようなクラス名を指定しています。
|
1 |
<img width="999" class="flickr_photo_img" src="http://path/to/img.png"> |
style.cssには画像から一定幅を開けてborderプロパティで枠線を付けるようにしています。
|
1 2 3 4 5 6 7 8 |
.flickr_photo_img{ display:block; margin-left: auto; margin-right: auto; padding:4px; background:#ffffff; border:1px solid #dddddd; } |
Markdownにはセンタリングの記法がないのでどうにかしたいと思っていましたが、これで画像貼り付けの作業負荷を相当軽減することが出来ました。
[sharepost url=”http://www.htmq.com/htmlkihon/005.shtml”]