←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。
だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました!
display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。
だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました!
display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。
自分用メモ。
Firefoxなどで見た時に、画像を回り込ませ、border指定をしてpaddingで余白を設けた時に、下部分だけ指定した値と違って、ちょっと大きくなってしまう事があります。
そんな時に役立つのが下記のスタイル。
img {
vertical-align:bottom;
}
コレで指定した通りに表示されます。
今回のエントリーもちゃんとサンプル用意して実際の画面を出そうと思ったのに再現出来ず...なんでだろう。