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

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

感谢您抽出时间阅读。

（Note：直接翻译成中文后在 HTML 标签前后加上空格）

- Question Overflow

Answer 1

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

我相信@alt的高度远小于100px。

通过将line-height固定为高度，vertical-align将执行您想要执行的操作。
这是一个演示链接：http://jsfiddle.net/PhilippeVay/Xevph/

- FelipeAls

---

你介意帮我解决这个悬赏问题吗？ - Question Overflow

这似乎在Chrome上无法正常工作。但是如果有人在意的话，看起来可以在alt文本的开头添加一个空格来稍微推一下它... - Kevin

在Chrome 42上的Vista中OK，除了似乎将破碎的图像图标向水平方向推动几个像素的替代文本。@KVISH你在Safari 8.1或更早版本中测试过吗？ - FelipeAls

no good if line wraps - o17t H1H' S'k

Answer 2

不，你不能这样做。但是你可以改变颜色和显示属性，例如：

img[alt]{
color:red;
 display:none;
}

这是一个很酷的提示，首先检查文件是否存在，即您要加载的图像是否可用，如果不可用，则显示一个带有alt属性文本的DIV。

- Rizwan Mumtaz

---

这个答案有误导性。属性选择器（方括号）不是选择属性本身，而是选择所有设置了该属性的元素。请参考：https://www.w3.org/People/howcome/foo.dir/selector.html - Fred