Harukiya Archives

2008/10/11

category /

2007/04/02

category / CSS

何人くらいの方に目撃されたかわかりませんが、春木屋がマメ字！というエープリルフールネタを仕込んでおきました。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 をいじらずに同様の表示をするスタイルです > no text-align centering

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; }

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

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

writeback

1. sugar ： 4月1日は早々とぶっ倒れてましたー。残念。-03日21時
2. マス ： おかげん、いかがでしょうか。
   ＞残念
   大丈夫です。ここは毎日がエイプリルフーｒ-04日20時
3. お名前 ： 　パス ：
   ご意見・ネタ・苦情など

< 写真する姿勢 | あすなろ > | 表紙へ戻る | 探す | 案内