Add centered Text above centered flexbox-CodePudding

I'm trying to add a Centered Header above a flexbox which I also centered.

CSS:

.images {
  padding-right: 30px;

  width: 70%;
  height: auto;
}

/*centered flexbox*/
.box {
  display: flex;
  margin: auto;
  position: absolute;
  align-items: center;
  justify-content: center;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  
}

/*header*/
h1 {
  text-align: center;
  font-size: 1.5vw;
  color: rgb(255, 255, 255);
}

/*paragraph*/
p.t1 {
  font-size:0.8vw;
  color: rgb(255, 255, 255);
  white-space: nowrap;
}

HTML:

<body>

<h1>CENTERED HEADDER</h1>

 <div >
   <img src="images/image.png" ></img>
   <p >
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
   </p>
 </div>  




</body>

Basically I want the "CENTERED HEADER" text to be part of the Image and the TEXT and rescale with it and all but with the header being above the Image and Text. But it couldn't figure out how to do that.

Can someone help me with that?

CodePudding user response：

You can use a common class box inside that we can give the image and header elements. you can a seperate class for header.

.header{
font-size: 10px;
position: absolute;
color: blue;
}

.images {
  width: 70%;
  height: auto;
}

.header{
font-size: 10px;
position: absolute;
color: blue;

}

/*centered flexbox*/
.box {
  display: flex;
  margin: auto;
  position: absolute;
  align-items:center;
  justify-content: center;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  
}
/*paragraph*/
.t1 {
  font-size:1.5vw;   
  white-space: nowrap;
}

<body>
<div >
<div >
<h1>CENTERED HEADDER</h1>
</div>
 <img src="https://i.pinimg.com/originals/43/62/24/436224f4005dcee1f5c5096cbc77bd80.jpg" ></img>
   <p >
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>

    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
    <br>TEXT TEXT TEXT TEXT TEXT TEXT</br>
   </p>
 </div>  
</body>

CodePudding user response：

Run this separately and check whether this is what you're looking for :)

<!DOCTYPE html>
<html>
<head>
    <style>
    .images {
  width: 70%;
  height: auto;
}

.header{
font-size: 10px;
position: absolute;
color: white;

}

/*centered flexbox*/
.box {
  display: flex;
  margin: auto;
  position: absolute;
  align-items:center;
  justify-content: center;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  
}
    </style>
</head>
<body>

 <div >
 <div >
<h1>CENTERED HEADER</h1>
</div>
   <img src="https://i.pinimg.com/736x/5b/b9/59/5bb95935defd974fa87b44eaa8ed9bcd.jpg" ></img>
 </div>  

</body>
</html>