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

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>