html - 如何垂直对齐 float 图像中的替代文本？

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。

通过将 line-height 固定为高度，vetical-align 将按照您的意愿执行。
这是一个 fiddle :http://jsfiddle.net/PhilippeVay/Xevph/