inline-blockとvartical-alignで画像と文字を縦中央に合わせる

cssで縦方向中央に配置する方法(5つのケース+1)
http://bashalog.c-brains.jp/11/10/13-200523.php

HTML

<div class="case05">
<img src="http://dummyimage.com/100x100/000/fff.gif&text=img" alt="img" height="100" width="100" />
<span class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキスト</span>
</div>

CSS

.case05 img {
display: inline-block;
vertical-align: middle;
*zoom: 1; /* for IE6-7 */
*display: inline; /* for IE6-7 */
}
.case05 .txt {
display: inline-block;
vertical-align: middle;
width:250px; /* 幅の指定がない場合、改行が必要な幅を超えるとカラム落ちします。 */
*zoom: 1; /* for IE6-7 */
*display: inline; /* for IE6-7 */
}

inline-blockってなんだろうと思っていましたが最近すっごい便利なことを覚えました。



コメントは受け付けていません。