タグ「display」の一覧

a要素が2行になった場合に背景下にテキストが来ないように。

目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。
そういえば、web creatorsの5月号(たぶん)に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか!?読んでないーorz
あと、7月号(Vol.91)にちょろっと記事書いてるので良ければ買ってくだしあ。

サンプルのキャプチャ
タイトルがa要素になってますが、インライン要素でもいいです。
背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。

タイトルって難しいですねorz

さて、時間もあまりないので本題に。

画像とかの横にあるテキストを上下中央に

上下中央になってるキャプチャ←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。

だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました!

display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。

IE6のfloatしたボックスのmarginの値が2倍になるバグ対策の件

IE6で、floatで指定した値と同じ方向にmarginの指定をすると、指定値の倍程度になってしまうっていう有名なバグ。

その対策として、marginの代わりにpaddingを使うとか、親要素でpaddingを取るとかあったりしますけど、一番手っ取り早い感じで、問題が無さそうなdisplay: inline;を指定する方法がありますよね。えぇ。

何となく他のブラウザに影響ないの!?って思ってしまうかもですが、
こういう矛盾しちゃいそうな指定がされた時はどーしたらええの?っていうのがちゃんと仕様で決まってるので仕様通りに動いてくれるブラウザさんなら問題ないわけです。

そうなんですよ。仕様通りにね、動いてくれるブラウザさんならね。

↑上に行くよ