no text-align centering

何人くらいの方に目撃されたかわかりませんが、春木屋がマメ字！というエープリルフールネタを仕込んでおきました。4月1日に初めて訪れた場合のみ、別の CSS をリンクするというありがちな手だったのですけど、その時に書いた CSS が自分的にちょっと面白かったのでご紹介。

幅 700px のボックスがあったとして、ごく普通にセンタリングする場合、すべての要素を<div>要素で囲み

1. body {
2. text-align: center;
3. }
4. div#hoge {
5. text-align: left;
6. width: 700px;
7. margin: auto;
8. }

てな具合にやりますね？まあ、ブラウザ界の駄々っ子をあやすための苦肉の策なんですけど、この text-align をいじらずに同様の表示をするスタイルです。

1. body {
2. margin: 20px 0;
3. padding: 0 50%;
4. }
5. div#hoge {
6. margin: 0 -350px;
7. }

誰かがすでにやってる予感もしますが。左右の詰めを合計で 100% 取るって飛躍がステキだなと。この方法の良いところは、センタリングに限らず、右から 25% 位置にオフセット

1. body { padding: 0 25% 0 75%; }

だとか、中心から左へ 100px ずらした”センタリングもどき”

1. div#hoge { margin: 0 -450px 0 -250px; }

みたいなこともできること。

関連：省エネセンタリング