位置在其他跨度和中心上的位置跨度均为水平分度瓦/可变高度

Question

我有一个安静简单的html结构，但我无法弄清楚我必须做什么才能将8置于0之上而不会丢失包装div的高度。

如果我在两个跨度上使用浮点数或绝对位置，则divs高度降为0.如果我在第二个div上使用绝对位置和浮点数的组合，我无法设置水平正确居中跨度集装箱。

我希望你能告诉我我做错了什么，以及如何让第一个跨度在第一个跨度上移动，同时让第一个跨度确定环绕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>

Answer 1

可以使用的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>