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

user_14667998 0
Viewed 47

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

css html
3 Answers

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 */
}
user_110054740

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>

user_57843880

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>

user_135734440
Related