CODEWITHSUNDEEP
htmlcss
Metalois
Metalois

Reputation: 77

Center text inside a Div box 20px from bottom edge

I have a beige Div box that responds to the window size, it's always x amount distant from window borders, check webpage: https://loiz.xyz/ everything is working fine up to here.

👉 Now, I want to add a very small text that is 20px from the bottom edge of the div box, check image below.

I've tried centering the text so many times, but it always fails. Never is centered, or it goes between the div box and vp window on the right, or it is a fixed distance from left so when window is adjusted it's not quite on the center.

Please help me understand where I should put the <h5>text</h5> tag and how to put it inside the div box 20px from bottom, without messing with the existent centered gif. Optionally, I want to decrease that text size according to vp window size, so it shows smaller on mobile and bigger in laptops.

current code: 

body {
  background: #C0C0C0;
  padding: 0;
  margin: 0;
  display: flex;
  height: 100vh;
}

div {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  background: #f0e8e6;
  overflow: hidden;
  margin: auto;
  display: flex;
}

img {
  position: absolute;

  top:50%;
left:50%;
 
  transform:translate(-50%, -50%);
  
  width:calc(100% - 40px);
height:calc(100% - 40px);
  max-width:40vw;
    object-fit:contain !important;
}
<html>
  <head>
<link rel="stylesheet" type="text/css" href="styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  </head>
 <body>
    <div>
      <img src="https://loiz.xyz/loiz.gif" 
    </div>

<style type="text/css"> html, body {margin: 0; height: 100%; overflow: hidden}</style>
 </body>
</html>

enter image description here

Upvotes: 1

Views: 42

Answers (1)

Serdar G&#246;leli
Serdar G&#246;leli

Reputation: 334

After giving position fixed property to h5 and specifying the position, you can adjust the size of the text with @media according to the screen size.

body {
  background: white;
  padding: 0;
  margin: 0;
  display: flex;
  height: 100vh;
}

div {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  background: #f0e8e6;
  overflow: hidden;
  margin: auto;
  display: flex;
}

img {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:calc(100% - 40px);
  height:calc(100% - 40px);
  max-width:40vw;
  object-fit:contain !important;
}
h5{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translatex(-50%);
  font-size:1.5rem;
  line-height: 1.5rem;
}
@media screen and (min-width:768px){
   h5{
    bottom:20px;
    font-size:0.8rem;
    line-height: 0.8rem;
  }
}
 <div>
      <img src="https://loiz.xyz/loiz.gif" />
      <h5>TEXT</h5>
 </div>

Upvotes: 1

Related Questions