使用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

当然，还有很多方法可以达到相同的效果（甚至完全避免绝对位置），但我建议在这种情况下使用定位。