Text not appearing after banner centered

Question

Does anyone know how to place text after a container and it still be centered. Anyone know how to fix this? For some reason, If I don't put the position at the end if the program, it will go behind the banner picture, and if I when I try to center it doesn't work. I want them both centered, but the example to be after the banner, but whenever I try, it won't let me put the text at the right height, and be centered at the same time

.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>

Any Ideas?

Your container has `text-align: center`. Simply add that to the text you want to add outside of the container. Or are you asking how you can have both the banner and text centered in the same line? — Obsidian Age, Oct 31 '18 at 00:24
Just edited the main thing to be more percisce, and included the entire code. — AllAwesome497, Oct 31 '18 at 00:39

score 0 · Answer 1 · answered Oct 31 '18 at 03:04

0

You are doing it all wrong, you shouldnt do img align like that simply add it after img url like this

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

Are you asking for them both to be centered? If you are you can simply add <center> tag before container div and both will be centered. Be more precise.

answered Oct 31 '18 at 03:04

First Name

167
9

No, The text won't appear after the image, without putting its position, which you see at the
at the end
– AllAwesome497 Oct 31 '18 at 11:24
But thanks for the tip. The container/banner is not acting like its solid, it doesn't break so that text will automatically start after it – AllAwesome497 Oct 31 '18 at 11:29
I ended up settling with making a `` to make the text appear after it, by making it all positioned. Thanks anyways. – AllAwesome497 Dec 14 '18 at 16:56

AllAwesome497 · Accepted Answer · 2018-10-31T11:54:58.940

0

I found the answer at How to center a "position: absolute" element all I had to do was add

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

I then simply did this

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

edited Oct 31 '18 at 11:54

answered Oct 31 '18 at 11:48

AllAwesome497

190
2
3
14

Text not appearing after banner centered

2 Answers2

at the end