blog.xicolotic

とあるブラウザの text-align 力がちょっと過剰だった時代のお話。

むかーし、むかし。
HTMLの全ての要素がブロックレベル要素とインライン要素に分けられていた頃のお話。

CSSでセンタリングする基本手法としては、今もおなじみのこの2つが使われておった。

  • text-align: center; /* for インライン要素(※包括要素に指定) */
  • margin: 0 auto; /* for ブロック要素 */

ところが、IE5.5(過去互換モードの IE6も)はこうじゃった。

  • text-align: center; /* for インライン要素 & ブロック要素(※共に包括要素に指定) */
  • margin: 0 auto; /* 知らない子ですね */

.wrapper に「margin: 0 auto;」を指定したところで、左寄せのままびくとも動かない。
しかし、その包括要素に「text-align: center;」を指定すれば、これが仕様とばかりにセンタリングされる。

悩みに悩んだエンジニア達が考えついたのは、こんな方法じゃった。


body {
  text-align: center; /* 【point1】for IE5.5 */
}
.wrapper {
  margin: 0 auto; /* 【point2】for not IE5.5 */
  text-align: left;/* 【point3】text-align: centerの継承を left で上書きして阻止 */
}

【point1】によって、IE5.5でも.wrapper はセンタリングされる。
【point2】によって、他のブラウザ達の.wrapper もセンタリングされる。
【point3】のおかげで、IE5.5を含む全てのブラウザで.wrapper内のテキストたちを左寄せで表示できる。

こうして、ちょっとレガシーすぎるブラウザでも安心な、「ブロック要素センタリングテクニック万能版」は広く使われていくことになったのじゃ。
めでたし、めでたし。

と、いうわけで。

CSS昔話 Advent Calendar 2015の7日目の記事でした。
ちゃんちゃん。

margin: auto;って、本当便利だよな、ってつくづく思います。

カテゴリ:
CSS