如何在浮动图像中垂直对齐替代文本?

尝试了一些与垂直对齐有关的解决方案，但我似乎无法解决此问题.不知道是否有人可以帮助我.我想要的只是将替代文本放置在空白图像的中间.

Having tried some of the solutions relating to vertical align, I don't seem to be able to solve this. Not sure if anyone can help me on this. All I want is to position the alternate text in the middle of an empty image.

这是html代码:

<div class="viewport">
 <a href="#">
  <img src="http://yahoo.com/" alt="no image" />
 </a>
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 </div>
</div>

这是CSS代码:

.viewport {
 background: #bbb;
 width: 350px;
 height: 300px;
 padding: 5px;
}

.viewport img {
 float: left;
 margin: 5px;
 width: 100px;
 height: 100px;
 background: #000;
 text-align: center;
}

.viewport div {
 margin-left: 20px;
}

感谢您抽出宝贵的时间阅读.

Thanks for taking your time to read.