垂直居中文本，在内联块内

Question

我需要将div内的文本垂直对齐到中心。几乎唯一的限制（我能想到的，立即）是容器必须是内联块，所以我不能使用具有垂直对齐的表格单元格。

HTML

<div id='w'>
   <img src='http://www.science.unsw.edu.au/files/news/527C868C9284958A22F9E4D448BDDA12.JPG' />
   Lorem ipsum dolor sit amet...
</div>

CSS

html,body {margin:0;background:#333}
#w {margin:10px;background:#fff;padding:10px;display:inline-block}
img {width:20%;float:left}

（如果我链接到jsfiddle，我不会发布没有代码的帖子。）

这是一个小提琴：http://jsfiddle.net/D5e9P/

Answer 1

用vertical-align替换图像浮点数：

img{width:20%;vertical-align: middle;}

见这里：http://jsfiddle.net/D5e9P/1/

Answer 2

你可以这样做：

div#element-id {
    line-height: 20px; /* or the height of the div element */
    vertical-align: top;
}