Question

我试过这个：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中的事实。

对此有何帮助？谢谢！

这是数字应该适合的地方。你会注意到即使在这里他们稍微偏离了，但你可以得到一般的想法。背面的“饼图”不是所需影响的一部分。我只想表明每个数字应该位于其中一个象限中。

Answer 1

您的问题中有一些事情正在发生，所以我会回答我认为对您最有帮助的事情（也不完全确定您正在做什么）。

＃3以身体为中心而不是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

如何将3个元素放置到圆的3个部分中

1 个答案: