Firefox で使われている上下左右中央配置のスタイルシート

Category : CSS

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 あたりがヒントかと思います。

ちょっと試したところ、他のブラウザの場合は IE8 以上なら同じように動くようです。
もちろん img だけでなく div などにも応用できます。

@ksk1015 さんが分かりやすいサンプルを作られていましたので、リンクしておきます。

@o_ti さんが色々検証してくれました。

Leave a Reply