divの先頭にh1を表示する方法は？

Question

私はちょうどHTMLを学び始めました。私のHTMLには、画像とh1タグを含むdivがあります。今度はh1がdivになります。どのように画像の中央にそのh1を配置するには？

<div class="headwrap"> 
    <div class="headimage"><img src="images/Header-image1.jpg"> 
    <h1 class="headtxt"> I Love Photography</h1> 
    </div> 
</div> 

のCss：

.headwrap { 

    margin: 0; 
    max-width: 1500px; 
    width: 100%; 
    height: 100%; 


} 

.headimage { 

    max-width: 1500px; 
    width: 100%; 

} 

.headtxt { 

    margin: 0 auto; 
    padding: 0; 
    -webkit-margin-before: 0em; 
    -webkit-margin-after: 0em; 
    float: left; 

} 

Answer 1

あなたは親要素にposition: relativeを使用し、H1タグにposition: absoluteを置くことができます。

.headwrap { 

margin: 0; 
max-width: 1500px; 
width: 100%; 
height: 100%; 
position: relative; 


} 

.headimage { 

max-width: 1500px; 
width: 100%; 

} 

.headtxt { 

position: absolute; 
top: 0; 

}