子divの垂直位置を親divに揃える方法

Question

私は子div（option-info）を親divのすぐ下に置くようにしようとしていますが、100％の幅も与えています。

ここでは、子は中央に配置され、100％を持ちますが、親divに対して配置されていません。子供に絶対幅を与える方法がありますが、CSSとHTMLでは垂直方向の相対的な配置ですか？前もって感謝します！

<div id="container"> 

<div class="option-container"> 
<div class="header">hardware</div> 
<div class="option-info">test</div> 
</div> 

<div class="option-container"> 
<div class="header">design</div> 
<div class="option-info">test</div> 
</div> 

<div class="option-container"> 
<div class="header">software</div> 
<div class="option-info">test</div> 
</div> 

<div class="option-container"> 
<div class="header">gaming</div> 
<div class="option-info">test</div> 
</div> 

</div> 

ここでCSSだ：

.header { 
display: inline-block; 
position: relative; 
background-color: rgb(81, 154, 226); 
font-size: 2.3em; 
height: 100px; 
color: white; 
font-family: 'saira', arial; 
text-shadow: 2px 2px #2280dd; 
width: 250px; 
text-align: center; 
text-transform: uppercase; 
margin: auto; 
top: 70px; 
-webkit-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75); 
-moz-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75); 
box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75); 
z-index: 1; 
line-height: 100px; 
} 

#container { 
text-align: center; 
width: 100%; 
} 

.option-container { 
display: inline-block; 
width: 250px; 
margin: 22px 22px 100px 22px; 
} 

.option-info { 
display: inline-block; 
position: absolute; 
width: 100%; 
font-family: 'roboto', arial; 
font-size: 1.3em; 
text-align: center; 
right: 0; 
left: 0; 
} 

Answer 1

だから私は、HTMLを再構築しようと、これは私が思い付いたもので、これは私が探していたまさにです！

<div class="option-container"> 
<div class="header">hardware</div> 
<div class="info-container"> 
<div class="option-info">test</div> 
</div> 
</div> 

<div class="option-container"> 
<div class="header">design</div> 
<div class="info-container"> 
<div class="option-info">test</div> 
</div> 
</div> 

<div class="option-container"> 
<div class="header">software</div> 
<div class="info-container"> 
<div class="option-info">test</div> 
</div> 
</div> 

<div class="option-container"> 
<div class="header">gaming</div> 
<div class="info-container"> 
<div class="option-info">test</div> 
</div> 
</div> 

そして私はちょうどCSSとの二つのことを変更：

.info-container { 
position: absolute; 
width: 100%; 
right: 0; 
left: 0; 
height: 100%; 
} 

.option-info { 
display: inline-block; 
position: relative; 
width: 100%; 
font-family: 'roboto', arial; 
font-size: 1.3em; 
text-align: center; 
color: black; 
color: rgba(0, 0, 0, 0.9); 
margin: auto; 
top: 100px; 
} 

編集：私は答えを感謝し、私が自分自身の問題を修正しそうです。

Answer 2

でしょう、あなたのために、この作品のようなもの。ここ

はHTMLですか？私はoption-info要素をHTMLから取り除き、適切な位置にテキストを挿入するために:after擬似文字を使用しました。

.header { 
 
display: inline-block; 
 
position: relative; 
 
background-color: rgb(81, 154, 226); 
 
font-size: 2.3em; 
 
height: 100px; 
 
color: white; 
 
font-family: 'saira', arial; 
 
text-shadow: 2px 2px #2280dd; 
 
width: 250px; 
 
text-align: center; 
 
text-transform: uppercase; 
 
margin: auto; 
 
top: 70px; 
 
-webkit-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75); 
 
-moz-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75); 
 
box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75); 
 
z-index: 1; 
 
line-height: 100px; 
 
} 
 

 
#container { 
 
text-align: center; 
 
width: 100%; 
 
} 
 

 
.option-container { 
 
display: inline-block; 
 
width: 250px; 
 
margin: 22px 22px 100px 22px; 
 
    position: relative; 
 
} 
 

 
.option-container:after { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 10px 0; 
 
    content: 'test'; 
 
    bottom: -120px; 
 
    left: 0; 
 
    z-index: 9999; 
 
    font-family: 'roboto', arial; 
 
    font-size: 1.3em; 
 
    text-align: center; 
 
    }

<div id="container"> 
 

 
<div class="option-container"> 
 
<div class="header">hardware</div> 
 
</div> 
 

 
<div class="option-container"> 
 
<div class="header">design</div> 
 
</div> 
 

 
<div class="option-container"> 
 
<div class="header">software</div> 
 
</div> 
 

 
<div class="option-container"> 
 
<div class="header">gaming</div> 
 
</div> 
 

 
</div>