html - 使用 flex 在图像顶部对齐文本

Question

.container{
   display: flex;
   align-items: center;
   justify-content: center;
position:relative;
}
.text{
         position:absolute;
left:0;   
}

<div class="container">
  <img src="http://lorempixel.com/800/800/" />
  <div class="text">
  <p>
  some text here to be vertical aligned on the left where the image starts;
  </p>
  
  </div>

</div>

我希望该文本位于图像上方，垂直居中，位于左侧。除了使用之外还有其他解决方案吗:

position:absolute;
left:0;

我觉得用一些 flex 属性应该可以做到这一点。

谢谢!

Answer 1

.container {
  position: relative;
}
.text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
}

<div class="container">
  <img src="http://lorempixel.com/800/800/" />
  <div class="text">
    <p>
    some text here to be vertical aligned on the left where the image starts;
    </p>
  </div>
</div>

我做了什么:

1. 制作一个与图像大小相同的容器:只需将 img 单独放在一个 div 中
2. 让上面的容器成为一个定位上下文:position: relative
3. 创建一个容器，用于对齐其中的东西，其定位上下文的大小:position: absolute 和 0
上的所有边缘
4. 垂直居中:display: flex 加 align-items: center

当然，还有很多其他方法可以达到相同的效果(甚至完全避免绝对位置)，但我更推荐在这种情况下使用定位。