将文本置于“指南针”位置上的任何图像

假设您在HTML文档中具有任意宽度和高度的JPEG图像，并且要将文字“North”，“South”，“East”和“西方“在像指南针上的图像。将文本置于“指南针”位置上的任何图像

伪代码来解释的位置：

北：X = image.width/2，Y =保证金
南：X = image.width/2，Y = image.height利润
东：Y = image.height/2，X = image.width利润
西：Y = image.height/2，X =保证金

你如何做到这一点不使用一个ny JavaScript，只有CSS。也就是说，NSEW标签始终处于所有图像尺寸的预期位置。

2015-11-25 forthrin

请在下一次表现出一定的HTML，什么你目前有/曾尝试CSS！ –

这是使用绝对定位在标签上相当直接。然后，您可以根据需要应用每个标签的顶部/右侧/底部/左侧定位属性。只要我们可以定义标签的尺寸，就可以很容易地完成它们的定位。在这个例子中，每个标签都是20像素×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; 
}

在“保证金”的条款，你在你的问题的psudeo代码所概述的，只是添加到位的0用于顶/右/下/左。所以如果你想N从边缘变成10px，改顶：0;顶部：10px;

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

来源

2015-11-25 23:33:21 partypete25

'显示：块;'和'vertical-align：middle;'对绝对定位的元素？ https://jsfiddle.net/xz0ojfft/5/ –

公平的电话@ RokoC.Buljan显然显示：块不是必需的。我不知道垂直对齐没有效果。欢呼声 – partypete25

这很好！但是：无论如何自动将所有四个文本居中放置在一个锚点周围（如果例如增加字体大小，它们会扩展为两种尺寸）。现在他们似乎左对齐，无论我做什么，我发现自己必须手动调整页边距以达到像素完美，以获得正确的位置（当更改/翻译NSEW字时将失败）。据我所知，text-align和vertical-align似乎对最终结果没有任何作用。 – forthrin

将文本置于“指南针”位置上的任何图像

回答

相关问题