Текст не отображается после центрирования баннера

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

Я нашел ответ в Как отцентрировать элемент "position: absolute" все, что мне нужно было сделать, это добавить

left: 0%;
right: 0%;
text-align: center;

Я тогда просто сделал это

<span style="position: absolute; top: 38vh; left: 0%;right: 0%; text-align: center;">

Answer 2

Вы все делаете неправильно, вы не должны делать img align так, просто добавьте его после img url, как это

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

Вы просите, чтобы они оба были в центре? Если вы, то можете просто добавить тег <center> перед контейнером div, и оба будут центрированы. Будь точнее.