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作为弹性项目（其容器具有默认的垂直/第二轴align-items: stretch）和一个弹性容器（然后实现垂直对齐）使用flex-direction:column和justify-content: whatisneeded）

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

通过将行高固定为高度，vetical-align将执行您要执行的操作。
这是一个小提琴：http://jsfiddle.net/PhilippeVay/Xevph/

Answer 2

不，你不能这样做。但您可以更改颜色和显示属性，如

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

这是一个很酷的提示，首先检查文件是否存在i-e您正在加载的图像是否可用，如果没有，则在该DIV中显示带有alt属性文本的div。

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

2 个答案: