stylesheet：インライン要素の上下センタリング

参考：
http://ideahacker.net/2015/02/14/9779/

（ブロック要素内の）インライン要素の上下センタリングをする場合、上下センタリングしたい要素を内包するブロック要素に"display: table-cell;"と"vertical-align: middle;"を指定する。
（outerbox-decorationは体裁を整えるため）

<div class="center-V-inline outerbox-decoration">
    <span>
        skyblueのブロック要素（div要素）の中でインライン要素（img要素）を<br/>上下センタリング
    </span><br/>
    <img src="image_s.jpg">
</div>

.center-V-inline{
    display: table-cell;
    vertical-align: middle;
}
.outerbox-decoration{
    margin: 0 auto;
    width: 600px;
    height: 300px;
    background: skyblue;
}

サンプル


以上