一行のテキストや画像を、とにかく縦中央に配置する

シンプルな一行に、画像等が混じる場合、普通に組むと、おそらく下のような表示になる。

 

 

<div>
<span>User : Login　</span>
<img src="sample" />
<span>　Sample text is here.</span>
</div>

なんとなくいまひとつで、それはおそらく内の要素が縦中央に配置されないからだが、意外にその対処がむつかしかった。ここだけ table 組みというのもおおげさだし、いろいろ面倒なこともありそうなので、floatもかけたくない。

参考サイトのように、さまざまなやりかたはあるが、

参考 http://c-brains.jp/blog/wsg/11/10/13-200523.php

結局、いちばん簡単で、すっきりするのが、とにかく　display:table の div で囲み、display:table-cell;vertical-align:middle の　span を配置するというやりかた。要は、テーブルを組んでいるのと同じ。

 

 

<div id="verical-middle">
<span>User : Login　</span>
<span><img src="sample" /></span>
<span>　Sample text is here.</span>
</div>

#vertical-middle {display:table;}
#vertical-middle span {display:table-cell;vertical-align:middle;}