在居中的 flexbox 上方添加居中的文本答案

【问题标题】：Add centered Text above centered flexbox在居中的 flexbox 上方添加居中的文本
【发布时间】：2022-01-14 19:54:58
【问题描述】：

我正在尝试在我也居中的弹性框上方添加一个居中的标题。

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 class="box">
   <img src="images/image.png" class="images"></img>
   <p class="t1">
    <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>

基本上我希望“CENTERED HEADER”文本成为图像和文本的一部分，并用它重新缩放，除了标题位于图像和文本之上。但它无法弄清楚如何做到这一点。

有人可以帮我吗？

【问题讨论】：

标签： html css flexbox html-heading

【解决方案1】：

您可以在里面使用一个通用的类框，我们可以在其中提供图像和标题元素。您可以为标题单独设置一个类。

.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 class="box">
<div class="header">
<h1>CENTERED HEADDER</h1>
</div>
 <img src="https://i.pinimg.com/originals/43/62/24/436224f4005dcee1f5c5096cbc77bd80.jpg" class="images"></img>
   <p class="t1">
    <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>

【讨论】：

【解决方案2】：

单独运行它并检查这是否是您要查找的内容:)

<!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 class="box">
 <div class="header">
<h1>CENTERED HEADER</h1>
</div>
   <img src="https://i.pinimg.com/736x/5b/b9/59/5bb95935defd974fa87b44eaa8ed9bcd.jpg" class="images"></img>
 </div>  

</body>
</html>

【讨论】：