css - 横幅居中后文本不出现

Question

有谁知道如何在容器后放置文本并且它仍然居中。有人知道怎么修这个东西吗？出于某种原因，如果我不把这个位置放在程序的最后，它就会在横幅图片后面，如果我试图居中它就不起作用。我希望它们都居中，但是这个例子是在横幅之后，但每当我尝试时，它都不会让我把文本放在正确的高度，同时居中

.container {
    position: relative;
    text-align: center;
    color: white;
}
.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>

有什么想法吗？

Answer 1

你做错了，你不应该像那样做 img align 只需像这样在 img url 之后添加它

<img src="url" align="left">

您是否要求它们都居中？如果你是，你可以简单地添加 <center>容器 div 之前的标记，两者都将居中。更精确。