如何将h1带到div的顶部？

Question

我刚开始学习HTML。在我的HTML中，有div包含图片和h1标记。现在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，然后将position: absolute放在H1标记上：

.headwrap {

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


}

.headimage {

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

}

.headtxt {

position: absolute;
top: 0;

}