Seeking help! I need to figure out how to center text after a container. Whenever I try, it ends up either behind the banner picture or misaligned. I want both the banner and the text example to be centered, but placing the text in the right position has been a challenge.
.container {
position: relative;
text-align: center;
}
.top-left {
position: absolute;
top: -8px;
left: -10px;
}
.bottom-left {
position: relative;
top: 29vh;
left:50%;
transform: translate(-50%, -50%);
}<div class="container">
<img align="left">
<div class="top-left">
<img src="C:\Users\wadeb\OneDrive\Desktop\Untitled design.png" alt="Banner Picture" style="width:100vw;height:33vh" style="margin: 0px px"></p>
</div>
<div class="bottom-left">
<a href="C:\Users\wadeb\AppData\Roaming\Sublime Text 3\Packages\User\Church Website.html">Home</a>
</div>
<h3 style="text-decoration-style: bold; position: absolute;top:34vh; text-align: center;">example:</h3>
</div>Any suggestions to make this work?