How can I correctly position text on an image? I have three blocks of text that I want to align on the same line with the image, but I'm struggling with it :(
#banner {
justify-content: center;
height: 600px;
margin-top: 100px;
margin-left: 10%; }
.banner-text {
color: white;
justify-content: center;
justify-content: space-around;
text-align: center;
display: inline-block;
position: absolute;
flex-direction: column; }
/*DownTown*/
.flex-text {
background-color: grey;
text-align: center;
}
html
<div id="banner"><img src="2525.jpeg">
<div class="banner-text">
<div class="flex-text text1">
<h1><b>DownTown</b> 384 West 4th St Suite 108</h1>
<div class="flex-text text2">
<h1><b>East Bayside</b> 3433 Phisherman Avenue </h1>
<div class="flex-text text3">
<h1><b>Oakdale</b> 515 Crecent avenue Second Floor </h1>
</div>
</div>
</div>
</div>
</div>
This is how it should appear: 2
And here is my current attempt: https://i.sstatic.net/vZjE2.jpg