'Trying to center text and a button over an image

I need to know how to style the text and button over the image so that, even when the page width is resized, the text and button always stay in the center of the image.

<div class="model-section">
  <img id="model" src="https://nextluxury.com/wp-content/uploads/Mens-Formal-Wear/Tuxedo/Tuxedo%20Mens%20Formal%20Wear%202.jpg" alt="Image cannot be displayed">
  <p class="model-p">Deals Of The Week</p>
  <button class="deals">Shop Now</button>
</div>
htmlcss


Solution 1:[1]

Put the text and Button in div and then style the .model-section and div section u just created.

.model-section {
  position: relative;
  text-align: center;
  color: white;
}

.info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="model-section">
  <img id="model" src="https://nextluxury.com/wp-content/uploads/Mens-Formal-Wear/Tuxedo/Tuxedo%20Mens%20Formal%20Wear%202.jpg" alt="Image cannot be displayed" />
  <div class="info">
    <p class="model-p">Deals Of The Week</p>
    <button class="deals">Shop Now</button>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tacoshy

Related Questions