4

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

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

感谢您花时间阅读。

4

2 回答 2

6

编辑 2017：Flexbox FTW（可能a同时作为弹性项目（其容器具有默认垂直/第二轴）和弹性容器（然后使用andalign-items: stretch实现垂直对齐）flex-direction:columnjustify-content: whatisneeded

我相信@alt其内容的高度，远小于100px。

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

于 2012-03-04T11:20:29.740 回答
4

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

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


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

于 2012-03-04T11:19:13.650 回答