他のスパンの中央に位置するスパンと中央の両方divの幅w /可変の高さ

Question

私は静かな単純なhtml構造を持っていますが、私は0を失うことなく0の上に置くために何をしなければならないのか分かりません折り返しdivの高さ

両方のスパンでfloatや絶対位置を使用すると、divの高さは0になります。絶対位置とfloatの組み合わせを2番目のdivに使用すると、コンテナ

私が間違っていることを教えていただきたいと思います。最初のスパンで折り返しdivの高さを決定させながら、2番目のスパンを最初のスパンの上に移動する方法を教えてください。

#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

あなたは0を超える8要素をセンタリングすることができますどの、left: 50%と負transformの組み合わせを使用することにより、絶対-位置付け要素をセンタリングすることができます

#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>