<分区>
<分区>
我有一个非常简单的 html 结构，但我无法弄清楚我必须做什么才能将 8 放在 0 的顶部而不丢失包装 div 的高度。
如果我在两个跨度上都使用 float 或绝对位置，则 div 高度会降低为 0。如果我在第二个 div 上使用绝对位置和 float 的组合，我将无法正确地将跨度水平居中容器。
我希望你能告诉我我做错了什么，以及如何将第二个跨度移动到第一个跨度之上，同时让第一个跨度确定包装 div 的高度。
#wrapper {
position: relative;
width: 100%;
text-align: center;
}
#first {
}
#first {
}<div id="wrapper">
<span id="first">0</span>
<span id="second">8</span>
</div>最佳答案
您可以通过组合使用 left: 50% 和负 transform 来居中绝对定位的元素，这将允许您将 8 元素居中在 0 之上:
#wrapper {
position: relative;
width: 100%;
height: auto;
text-align: center;
}
#first, #second {
color: white;
display: block;
}
#first {
background: blue;
height: 50px;
padding: 30px
}
#second {
background: red;
height: 10px;
padding: 10px;
position: absolute;
top: 0;
left:50%;
transform: translateX(-50%);
}<div id="wrapper">
<span id="first">0</span>
<span id="second">8</span>
</div>关于html - 将跨度定位在其他跨度之上，并在具有可变高度的 div 中水平居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45154996/