在“指南针”位置的任何图像上放置文本

Question

假设您在 HTML 文档中有一个任意宽度和高度的 JPEG 图像，并且您想在图像上放置“北”、“南”、“东”和“西”字样，就像在指南针上一样。

解释位置的伪代码：

• 北：X=image.width/2，Y=margin
• 南：X=image.width/2，Y=image.height-margin
• 东：Y=image.height/2, X=image.width-margin
• 西：Y=image.height/2, X=margin

你如何在不使用任何 JavaScript 的情况下实现这一点，只使用 CSS。也就是说，NSEW 标签始终位于所有图像尺寸的预期位置。

Answer 1

在标签上使用绝对定位相当简单。然后，您可以根据需要为每个标签应用上/右/下/左定位属性。只要我们可以定义标签的尺寸，那么完美定位它们就变得非常容易。在这个例子中，每个标签都是 20 像素 x 20 像素，所以我只需调整每个标签的边距，以便它们完美定位。

您可以随意调整图像尺寸，标签始终正确显示。

.north-label {
    top:0;
    left:50%;
    margin-left:-10px;
}
.south-label {
    bottom:0;
    left:50%;
    margin-left:-10px;
}
.east-label {
    right:0;
    top:50%;
    margin-top:-10px;
}
.west-label {
    left:0;
    top:50%;
    margin-top:-10px;
}

就您在问题的伪代码中概述的“边距”而言，只需添加它来代替用于顶部/右侧/底部/左侧的 0。因此，如果您希望 N 距离边缘 10px，请更改 top:0;到顶部：10px;

https://jsfiddle.net/partypete25/xz0ojfft/