I am attempting to center an image with text overlay in the middle of a page. Although the image is centered correctly, the overlay text remains off-center. Below is the code snippet. The text should be positioned in the top left corner of the image.
<div class="w3-content">
<div class="w3-row-padding" style="text-align: center;">
<div class="w3-display-container">
<img src="w3images/house5.jpg" alt="House" style="width:50%;" class="animated fadeInRight slower">
<div class="w3-display-topleft w3-black w3-padding animated fadeInRight slower">Summer House</div>
</div>
</div>
</div>