保持元素在其中心左侧的容器内具有绝对位置

Question

.container {
  display: inline-block;
  width: 150px;
  border: 1px solid black;
}
.letter {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 21px;
}

<div class='container'>
  <p class='letter'>A</p>
  <p class='word'>A pple</p>
</div>
<div class='container'>
  <p class='letter'>B</p>
  <p class='word'>B anana</p>
</div>
<div class='container'>
  <p class='letter'>C</p>
  <p class='word'>C arrot</p>
</div>

我知道这个设计是愚蠢的，可以轻松制作，

但我想学习使用它如何使用.letter使position: absolute; left:0; top: 0;位置与第一封信相同，

我只是想把它放在中间左边，没有填充或间距或者完全碾压。

像vertical-align: middle; text-align: left;之类的东西但是具有无间距的绝对位置的效果。

但是在添加left: 0;之后，它会继续将所有字母移动到页面左侧而不是父元素本身

我怎样才能做到这一点？

Answer 1

你可以添加position:relative到.container

.container {
  position: relative;
  display: inline-block;
  width: 150px;
  border: 1px solid black;
}
.letter {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 21px;
}

<div class='container'>
  <p class='letter'>A</p>
  <p class='word'>A pple</p>
</div>
<div class='container'>
  <p class='letter'>B</p>
  <p class='word'>B anana</p>
</div>
<div class='container'>
  <p class='letter'>C</p>
  <p class='word'>C arrot</p>
</div>