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

←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;

[honmayuri]

画像の横にあるテキストを画像に対して上下中央にする

[ahiru_z]

うおお…できたー！ひらっちさんありがとうございます；；

[ooooystersauce]

画像とかの横にあるテキストを上下中央に。和泉先生に教えてもらった。

[pefusan]

　上下中央揃え

[ke-tu]

画像横テキスト中央

[billy-elliot]

"[css][webdesign][table-cell]"

[studio-m]

CSS Hackとか言って長々とBK書くぐらいならtableでいいとか思うけど、これぐらいのシンプルさなら使いたい。

[webmarksjp]

browser

[p_chopin]

display: table-cell;

[hiro_y]

画像の隣にテキストを垂直方向の中央に配置。

[sansi]

垂直方向中央揃え

[kiyokichi]

　結構めんどくさかった

[purazumakoi]

table-cell, inline-blockプロパティにはvertical-alignが効くらしい。

[kyoheyjapan]

中央合わせ

[hatest]

[?]ここブクマするよりヨモツネットさんをブックマークした方がいいんじゃないの？詳しく書いてるし。

[kkeisuke]

下付き、下ぞろえも可能では? やってみよう

[Molokheiya]

できたのかー

[adsty]

「display:table-cell;」がポイントで、IEはハックで対応。

[xylitron]

css

[jnzm]

ポイントはdisplay: table-cell;とvertical-align: middle;

[iwmr]

IE6と7は、display:inline;とzoom:1; 他モダンブラウザは、display: table-cell; で縦位置中央。

[repon]

これは使えそうだ。

[webbingstudio]

CSSではできないと思ってたことがだんだん少なくなってきたな

[tofu-kun]

これ、以前やってたけどIE専用にCSSハックするのが面倒になって使うのやめた。…今後はどうしようかなぁ。

[Naoki1]

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

[wims_Tea]

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

[saladdays]

おぉ、table-cellの意外な使い方。しかし、display:inlineだけでこれができちまうIEはダメダメだな。

[imount69]

vertical-align +α　って事で。

[junhirabayashi]

←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS

[takets]

- これはいい。