css - 将元素的绝对位置保持在其容器内的中左位置

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>

我知道这个设计很愚蠢，但很容易制作，

但我想学习使用它 我怎样才能使用 position: absolute; 使 .letter 的位置与 First Letter 的位置相同？左:0；顶部: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>