html - 换行后，垂直对齐中间停止工作

我正在使用一个max-width属性来强制一个新行。在新行之后，文本转到图像的底部而不是停留在中间。
CSS:

.description{
font:bold 16px Verdana, Helvetica, sans-serif;
color: #3D85A7;
margin: 0 auto 20px auto;
text-align:center;
max-width:500px;
}

.icon{
max-height: 90px;
max-width: 85px;
margin: 10px 0 10px 10px;
vertical-align:middle;
}​

HTML格式：

<div class="description">
    <img class="icon" src="http://cleanfiles.net/images/pdf.png">
    This is a really really really really long file name.pdf
</div>​

作为一个实例，view it on a JSFIDDLE here.
另外：请注意，我当前的css与短文件名很好地配合（图标移入并保持居中）。到目前为止，答案涉及到float:，它在使用较短的文件名时似乎效果不佳。

最佳答案

我的解决方案是将html更改为（添加<p>标记）：

<div class="description">
  <p>
    <img class="icon" src="http://cleanfiles.net/images/pdf.png">
    This is a really really really really long file name.pdf
  </p>
</div>​

然后将属性float: left添加到图片中。
编辑：
以下是以文本为中心的链接（可能不是最好的方法，但它确实有效）：http://jsfiddle.net/LXS6x/9/