How to overlay text centre-bottom on an already centred image? - html

Question

I've played around quite a bit with margins, positions, etc. but can't manage to centre the text on my image where I want it to without roughly manually inputting the position, i.e. left: 10px;. It is probably simple but I cant figure it out as a learner
.container {
position: relative;
}
.text-block-main {
position: absolute;
bottom: 5%;
right: 44%;
background-color: black;
opacity: 75%;
color: white;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
border: 2px solid white;
padding: 10px;
}
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1200px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" alt="vvg" style="height:100%;" class="center">
<div class="text-block-main">
<h2> The Starry Night </h2>
<h3> Vincent van Gogh </h3>
</div>
</div>
Its kind of centred (manually) but not really and depends on the image im using itself, so i'd have to adjust it for every image i want to use. Appreciate some help with this

Answer 1

Solution with flex. Specify display: inline-flex on the container class to take the form of an img tag image.
And also remove bottom and right from the text-block-main class.
I marked all the edits in css.
.container {
position: relative;
display: inline-flex; /*add this it*/
align-items: center; /*add this it*/
justify-content: center; /*add this it*/
}
.text-block-main {
position: absolute;
/*bottom: 5%;*/ /*remove this it*/
/*right: 44%;*/ /*remove this it*/
background-color: black;
opacity: 75%;
color: white;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
border: 2px solid white;
padding: 10px;
}
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1200px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" alt="vvg" style="height:100%;" class="center">
<div class="text-block-main">
<h2> The Starry Night </h2>
<h3> Vincent van Gogh </h3>
</div>
</div>

Answer 2

You can use flexbox for this functionality. The text-block-main is getting the full cover of the image and is centering the inner div in the center with Flexbox.
.container {
position: relative;
}
.container img {
height: 100%;
width: 100%;
}
.text-block-main {
position: absolute;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.text-block-main .inner {
background-color: black;
opacity: 75%;
color: white;
padding: 25px;;
border-radius: 15px;
border: 2px solid white;
text-align: center;
}
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1200px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" alt="vvg" style="height:100%;" class="center">
<div class="text-block-main">
<div class="inner">
<h2> The Starry Night </h2>
<h3> Vincent van Gogh </h3>
</div>
</div>
</div>

Answer 3

You can try to do something like this with the flex attribute
.container {
position: relative;
height:200px;
display: flex;
justify-content: center;
align-items: center;
}
.container img {
width:100%;
position:absolute;
}
.text-block-main {
background-color: black;
opacity: 75%;
color: white;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
border: 2px solid white;
padding: 10px;
}
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1200px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" alt="vvg" style="height:100%;" class="center">
<div class="text-block-main">
<h2> The Starry Night </h2>
<h3> Vincent van Gogh </h3>
</div>
</div>
( Here below i add other solutions by changing only some piece of codes, what you don't see remains as it was )
solution with the image without having the container full width
.container img {
/*width:100%;*/
position:absolute;
}
solution without adding style to the image
/*
.container img {
width:100%;
position:absolute;
}
*/
.text-block-main {
position:absolute; /* add this with the other styles */
}