假设您在 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 标签始终位于所有图像尺寸的预期位置。
最佳答案
在标签上使用绝对定位非常简单。然后,您可以根据需要为每个标签应用上/右/下/左定位属性。只要我们可以定义标签的尺寸,那么完美定位它们就变得非常容易。在这个例子中,每个标签都是 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;
关于html - 在 "compass"位置的任何图像上放置文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33927506/