我试过这个:https://jsbin.com/qidesiqada/edit?html,output
也贴在这里:
<html>
<head>
<style>
p.two {
float: right;
color: white;
font-family: Century Gothic, sans-serif;
font-size:20px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p.one {
float: left;
font-family: Century Gothic, sans-serif;
color: white;
font-size:27px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p.three {
text-align: center;
margin-top: 12px;
font-family: Century Gothic, sans-serif;
color: white;
font-size:20px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#container {
width:45px;
}
p { margin: 0; }
</style>
</head>
<body>
<div id="container">
<p class="one">1</p><p class="two">20</p><br>
<p class="three">3</p></div>
</body>
</html>
然而，当 1 个元素比另一个大时，它会将其他元素推开。请注意大 1 如何将小 3 稍微向右推。这是我要避免的
无论字体大小或其他元素大小如何，我都希望每个元素都完全位于同一位置。所以看起来 position-absolute 会这样做，对吧？但是不，当我在那个底部元素上使用绝对位置时，它不会在 div 中居中。当我使用 transform: translate(-50%, -50%); 这样的技巧时它将它移动到屏幕的一半，就好像它忽略了它存在于容器 div 内部的事实。
有什么帮助吗？谢谢!
这是数字应该适合的地方。您会注意到即使在这里它们也略有偏差，但您可以了解总体思路。背面的“饼图”不是预期效果的一部分。我只是想表明每个数字都应该位于其中一个象限中。
最佳答案
你的问题中有一些事情正在发生，所以我会回答我认为对你最有帮助的问题(也不完全确定你在做什么)。
#3 以 body 而不是 div 为中心的原因是因为绝对位置是相对于它在具有绝对或相对定位的树中找到的第一个 dom 的。由于父 dom 元素具有默认的 static 定位，因此它相对于主体定位。
CSS-
#container { position: relative; }
jsbin-
https://jsbin.com/hamepicage/1/edit?html,output
编辑:
更接近您想要实现的目标。在所有元素上使用绝对位置，这样它们的边界框就不会发生冲突。代替 float: left; 使用:
left: 0;
代替 float: right; 使用:
right: 0;
对于居中，如果知道宽度，则可以计算中心。
calc(50% - 12px);
或者将其设为 width: 100%; 并居中对齐文本。
text-align: center;
width: 100%;
此外，不要忘记为您的容器 div 设置高度。
https://jsbin.com/tovopiseqe/1/edit?html,output
关于html - 如何将 3 个元素定位到圆的 3 个部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34685597/