Question

我有一个大表，其中有大量条目对应于同样大量的图像。要求是为服务器上找不到的每个图像显示替代文本。 alt属性工作正常。

但是，我无法定位alt文本 - 适用于图像的单元格填充，间距，边距等似乎不适用于替代文字。

我们正在使用表格来布局页面，这可能是相关的。

有人知道定位替代文字的方法吗？

Answer 1

img {
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

将alt垂直和水平对齐设置为中间。

Answer 2

你做不到。我知道没有浏览器可以设置alt属性的表示形式。

使用服务器端语言（例如PHP）组合页面而不是强制每个浏览器请求可能不存在的图像看起来更为明智。这样，您只需输出<img>标记或常规段落，具体取决于图片是否存在。

您还可以编写一个JavaScript函数（附加到<img>标记的 onerror 事件），用普通文本替换它。

Answer 3

父元素的行高会影响替代文字的显示。

Answer 4

您是否尝试将填充或边距应用于img本身而不是表格单元格？您在IMG元素上使用的CSS也适用于图像的alt文本。所以如果你设置了

img { padding-left:30px; }

你的alt-text也被推向右边30px（取决于text-align和其他东西）。您可能还想要定位：相对于img或垂直对齐它与邻居单元格（关系很重要）或者像浮动一样类似但是照顾是因为它会将图像从文本流中拖出它丢失的地方父母与子女关系的布局方面。 CSS样式有一个很好的resource。我认为你不需要像JavaScript（jQuery）那样的东西。

Answer 5

如果您希望图像左上对齐但alt文本居中，则无效，但如果图像和替代文字都应居中对齐：

尝试省略图片中的height和width属性（如果您现在包含它们）。这应该使边界框仅为alt文本所需的大小，可以垂直居中对齐，文本对齐中间。根据你想要的布局看起来你可以摆弄它，直到alt文本和图像看起来都不错。那是你能做的最好的事情，真的。

Answer 6

尝试以下操作：

img {
    line-height: 50px;
    text-align: center;
}

注意：您还可以在line-height属性中写出相同高度的图片

定位图像alt文本

6 个答案: