I'm struggling to center a text block both horizontally and vertically above an image. I have searched through various resources, but none of the solutions seem to work for me.
Below is the code snippet in question:
<body>
<div id="top-of-page">
<img src="images/etudes.png">
<div id="text-block">
<h1>Title</h1>
</div>
</div>
#haut-de-page {
position: relative;
margin: 10px;
}
#top-of-page img {
width: 100%;
}
#text-block {
position: absolute;
top: 5px;
margin: 0 auto;
background-color: rgba(0, 0, 0, .5);
color: white;
padding-top: 20px;
padding-left: 20px;
}
Despite setting the div "text-block" position as absolute, the text remains below the image. Any suggestions on how to fix this?
Would appreciate your thoughts!