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

【问题标题】：How to align text vertially in middle of li如何在li中间垂直对齐文本
【发布时间】：2019-02-06 22:34:58
【问题描述】：

我有一个 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>

我想在末尾添加一个使用 html 实体的箭头，我这样做了：

ul.techlist a {
  border: 1px solid black;
  padding: 15px;
  margin: 20px 0;
  display: block;
  color: black;
  text-decoration: none;
}
ul.techlist a::after {
    content: '\0203A';
    color: #e6190f;
    float: right;
    display: inline-block;
    font-size: 2em;
    font-weight: bold;
    font-family: arial;
}

问题在于，当它加载我的 chevron（上面的 css 中的 0203A 实体）时，它会加载到 li:a 的右下角。我正在尝试弄清楚如何将其垂直加载到中心但保持在右侧。

如果可行的话，我考虑过将图标添加为跨度，但我不是这里的 css 专家，所以我可能会找错树。

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

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

【问题讨论】：

CSS vertical alignment text inside li的可能重复
除了我使用的是我试图居中的伪元素，而不仅仅是框中的文本。我不需要文本居中，我需要元素
stackoverflow.com/questions/2939914/…的可能重复

标签： html css

【解决方案1】：

您可以通过添加：position: relative 到 a 和

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

这是结果：

【讨论】：

【解决方案2】：

这很简单：

li {
  padding-right: 25px; /* space for the character */
  position: relative; /* needed for absolute positioning of pseudo element */
}

li::after {
  content: ">";
  color: red;
  font-weight: bold;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

<ul><li>
The problem is that it when this loads my chevron (0203A enity in css above) loads in the bottom right of the li:a. I'm trying to figure out how to load it to the center vertically but stay on the right.<br>

I've thought about adding the icon as a span if that would work but I'm not much of a css expert here so I may be barking up the wrong tree.<br>

This is a link to my page nodal2 . rudtek.com/resources/technology/ (spaces added around first ".")<br>

this is picture of what I'm trying to do:<br>
</li></ul>

【讨论】：