Firefoxで使われている上下左右中央配置のスタイルシート
公開:
更新:
Firefoxで画像を開いたら、背景が暗い感じのCSSが使われるようになってました。Firefox 12からですかね? 11 からでした。そのページでは画像が上下左右中央に配置されています。
ちょっと興味が湧いたので中身を覗いてみたら、上下左右中央配置もCSSで行っていました。
使われているCSSファイルはresource://gre/res/TopLevelImageDocument.cssにあります。
このファイルはMPL 1.1/GPL 2.0/LGPL 2.1のトリプルライセンスです。
@media not print {
body {
background-color: #222;
margin: 0;
}
img {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media print {
img {
display: block;
}
}
これのimg
の部分ですね。この指定によって画像を上下中央に配置しています。
Visual formatting model detailsの10.3.7と10.6.4あたりがヒントかと思います。
ちょっと試したところ、他のブラウザの場合はIE 8以上なら同じように動くようです。
もちろんimg
だけでなくdiv
などにも応用できます。
@ksk1015さんが分かりやすいサンプルを作られていましたので、リンクしておきます。
要素の上下左右のセンタリング - jsdo.it - Share JavaScript, HTML5 and CSS
@o_tiさんが色々検証してくれました。