I am trying to align a image with some text in the middle of the page. The image gets to the center correctly , but the overlay text is off center. Below is the code. The text should be in the top left 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>

```