Html 如何在li中间垂直对齐文本

我有一个ul，里面有我设计的li项目：

<ul class="techlist tech">
  <li>
    <a target="_blank" href="#link1">
      <i class="red far fa-file"></i>content block 1
    </a>
  </li>
  <li>
    <a target="_blank" href="#link2">
      <i class="red far fa-file"></i>content block 2
    </a>
  </li>
  <li>
    <a target="_blank" href="#link3">
      <i class="red far fa-file"></i>content block 3.
    </a>
  </li>
</ul>

问题是，当它加载我的V形文字（上面css中的0203A enity）时，它会加载到li:a的右下角。我想知道如何将它垂直加载到中心，但保持在右侧

我曾考虑过，如果可以的话，可以将图标添加为一个跨距，但我不是css专家，所以我可能找错了方向

这是指向我的页面

nodal2的链接。rudtek.com/resources/technology/

（在第一个“.”周围添加空格）

这是我正在尝试做的事情的图片：

---

您可以通过将：

位置：相对
添加到
a
和

position: absolute;
transform: translate(-50%, -50%);
right: .3em;
top: 50%;

结果是：
这很简单：


li{
右填充：25px；/*字符空间*/
位置：相对；/*伪元素绝对定位所需*/
}
李：之后{
内容：“>”；
颜色：红色；
字体大小：粗体；
显示：内联块；
位置：绝对位置；
右：0；
最高：50%；
转化：translateY（-50%）；
}

问题是，当它加载我的V形文字（上面css中的0203A enity）时，它会加载到li:a的右下角。我正试图找出如何将其垂直加载到中心，但保持在右侧。

我曾考虑过，如果可以的话，可以将图标添加为一个跨度，但我不是css专家，所以我可能找错了方向。

这是指向我的页面nodal2的链接。rudtek.com/resources/technology/（在第一个“.”周围添加空格）

这是我正在尝试做的事情的图片：

的可能重复项，但我使用的是一个伪元素，我试图居中，而不仅仅是框内的文本。我不需要文本居中，我需要元素可能的重复
position: absolute;
transform: translate(-50%, -50%);
right: .3em;
top: 50%;