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

Posted 2023-03-05

【中文标题】如何垂直对齐浮动图像中的替代文本？

【英文标题】：How to vertical-align an alternate text within a floated image?

【发布时间】：2012-03-22 04:47:49

【问题描述】：

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

这是html代码：

<div class="viewport">
 <a href="#">
  <img src="http://yahoo.com/"  />
 </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;

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

【参考方案1】：

edit 2017: Flexbox FTW（可能将a 用作弹性项目（其容器具有默认垂直/第二轴align-items: stretch）和弹性容器（然后使用flex-direction:column 和@ 实现垂直对齐987654327@)

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

通过将 line-height 固定为等于高度，vetical-align 将按照您的意愿行事。 这是一个小提琴：http://jsfiddle.net/PhilippeVay/Xevph/

【讨论】：

你介意帮我处理this bounty question吗？

这似乎不适用于 chrome。但万一有人在乎，看起来您可以在替代文本的开头添加一个空格以将其推过一点......

在 Vista 上的 Chrome 42 中正常，但损坏的图像图标似乎将替代文本水平推了几个像素。 @KVISH 你在 Safari 8.1 或更早版本中测试过吗？

换行不行

【参考方案2】：

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

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

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

【讨论】：

这个答案具有误导性。属性选择器（方括号）不会选择属性本身，而是选择具有该属性集的所有元素。见：w3.org/People/howcome/foo.dir/selector.html