Question

假设您在HTML文档中有一个具有任意宽度和高度的JPEG图像，并且您想要放置单词＆＃34; North＆＃34;，＆＃34; South＆＃34;，＆＃34; East＆＃34;和＆＃34; West＆＃34;在指南针上的图像上。

用于解释位置的伪代码：

North：X = image.width / 2，Y = margin
南：X = image.width / 2，Y = image.height-margin
East：Y = image.height / 2，X = image.width-margin
West：Y = image.height / 2，X = margin

如何在不使用任何JavaScript 的情况下完成此，仅使用CSS。也就是说，NSEW标签始终位于所有图像尺寸的预期位置。

Answer 1

使用标签上的绝对定位相当直接。然后，您可以根据需要为每个标签应用顶部/右侧/底部/左侧定位属性。只要我们可以定义标签的尺寸，就可以很容易地完美定位它们。在这个例子中，每个标签是20px乘20px所以我只是调整每个标签的边距，以便它们完美定位。

您可以使用图像尺寸，标签始终可以正确显示。

.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;
}

关于＆＃34;保证金＆＃34;您在问题的psudeo代码中已经概述了，只需添加代替用于顶部/右侧/底部/左侧的0。因此，如果您希望N距离边缘10px，请更改top：0;顶部：10px;

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

将文字放在＆＃34;指南针＆＃34;上的任何图像上位置

1 个答案: