html - 在 "compass"位置的任何图像上放置文本

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/