html - CSS :before pseudoelement: vertically centered

Question

我有一个文本标签，我想在它前面加上一张图片。问题是我的文本只是正常大小，我们假设它是 font-size: 12px;，而图像要大得多，它有 height: 32px;。当我尝试这样做时:

<li>
  <span class="download">
    <a href="#abc">download something</a>
  </span>
</li>

/* a element CSS */
left: 30px;
margin-left: 30px;

/* a:before pseudoelement CSS */
content: '';
width: 24px;
height: 32px;
position: absolute;
top: 2px;
left: 0px;
background-position: 0 -88px;

我得到的东西或多或少是这样的:

III text text text
III
III

我想要的是这样的:

III
III text text text
III

问题是使用 :before 文本会垂直对齐到顶部，我希望它垂直居中。我该怎么做？

Answer 1

要使文本垂直居中，设置文本的行高等于图像的高度

line-height: 32px;