在中心左侧

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>