CSS で簡単に上下中央揃えを実現する | ヨモツネット
概要 CSS のみで、table 要素のような上下中央揃えを実現するための方法と解説です。 たまたま閃いたのですが、CSS で上下中央揃えは実は意外と簡単にできました。demo を用意しましたので、いろいろな Web ブラウザで見てみてください。 対応 Web ブラウザ Firefox 1, 2 Netscape 6, 7.1 Safari 2, 3 Opera 9.2 IE 5.01, 5.5, 6, 7 ( inline-block で実現) で意図した通りに表示されることを確認しました。 解説 中央揃えにしたい要素に対して、display:table-cell; を指定します。( table-cell が指定された要素には vertical-align が有効になります。) div.sample1 div { display:table-cell; } ただし、 IE 6, 7 に
Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット
概要 Firefox 1.0 以降用, Firefox 1.5 以降用, Firefox 3.0 以降用の CSS ハックの手法とその仕組みの説明です。 動作確認用の demo 説明 複数のセレクタに同じ宣言を共有する場合、h1, h2, h3 { font-style: bold } のようにセレクタをカンマで区切ってグループ化 (Grouping) することができます。 しかし、グループ化したセレクタ群の中に、Web ブラウザが未対応のセレクタが一つでも含まれている場合、グループ化した別のセレクタも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。 例えば、h2, p:first-child { font-weight:bold } のように宣言した場合、h2 要素と最初の子要素の p 要素が太字でレンダリングされます。しかし、IE 6 では :first-chi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
書籍などに紹介されていない display : inline-block について