【CSS】画像の横のテキストを中央に配置するには

css

よく画像の真横にテキストを配置するときにわざわざCSSでfloatさせて・・・などめんどくさい作業をしていたと思いますが、もっと簡単な方法があるのでメモ。下記のような感じにしたい。

displayプロパティをtable-cellにする

中央に配置するにはcssでdisplayプロパティをtable-cellに変更してvertical-alignでmiddleにするのがポイント。




この画像を天地中央に配置する

CSSは下記のようにする。画像とテキストとのスペースは画像にパッディングを設定すればいいかと。。
簡易バーションとしてIE用の\9ハックを利用してまとめたバージョンもメモっとく。


div#wrap p{
	font-size:12px;
	display:table-cell;
	vertical-align:middle;
	margin:0;
        }

/* for IE6 */
* html div#wrap p{
	display:inline;
	zoom:1;
        }

/* for IE7 */
*:first-child+html div#wrap p{
	display:inline;
	zoom:1;
        }

/*  画像にパッディングを設定してスペースを調整　*/
	div#wrap img{padding-right:13px;}

/*  \9ハックを利用してまとめた記述　*/
div#wrap p{
	font-size:12px;
	display:table-cell;
	vertical-align:middle;
	margin:0;
        display:inline\9;
        zoom:1\9;   
		}