html - 我正在尝试在图像中间对齐文本。我不确定我在做什么错

我是CSS和HTML的新手，我正尝试使文本出现在图像的中间，我不确定自己做错了什么。我删除了文本对齐中心，因为它出现在整个页面的中间。我有两个容器，将首页分为两个部分，我想让文本出现在每个有图像的容器的中间

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height:800px;
  text-align: center;
  color: white;
 }


.centered {
          left: 90;
    position:absolute;
    top: 260px;
    width: 100%
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;

}


img {
     width:100%;
     height:100%;
            } 

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <img src="4.jpg"alt="Snow">
     <div class="centered">I want This Text in the center</div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="5.jpg"alt="Snow">
    

最佳答案

.centered具有position: absolute;，它将引用已设置位置的最近的父对象，如果未设置位置，则将引用文档主体（窗口或视口）。在这种情况下，通过将.column设置为position: relative;，.centered的绝对位置将引用.column的约束而不是窗口。

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height:800px;
  text-align: center;
  color: white;
  position: relative;
 }


.centered {
    position:absolute;
    top: 260px;
    width: 100%
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;

}


img {
     width:100%;
     height:100%;
} 

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <img src="4.jpg"alt="Snow">
     <div class="centered">I want This Text in the center</div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="5.jpg"alt="Snow">
    

关于html - 我正在尝试在图像中间对齐文本。我不确定我在做什么错，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59310647/