如何在浮动图像中垂直对齐替换文本？

Question

尝试了一些与垂直对齐有关的解决方案后,我似乎无法解决这个问题.不确定是否有人可以帮助我.我想要的是将替换文本放在空图像的中间.

这是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;
}

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

Answer 1

编辑2017:Flexbox FTW(可能a同时作为flex项目(其容器具有默认的垂直/第二轴align-items: stretch)和flex容器(然后使用flex-direction:column和实现垂直对齐justify-content: whatisneeded)

我相信@alt它的内容高度远远低于100px.

通过固定等于高度的线高,vetical-align将执行您打算执行的操作.
这是一个小提琴:http://jsfiddle.net/PhilippeVay/Xevph/