CSS 防止较小的字体不居中

Question

我无法将 2 个元素（svg + 文本）垂直居中。我使用 flexbox 将这些元素居中，如果我不精确任何字体大小，它们就会完美居中。但是当我在文本上放置较小的字体大小（0.8em 而不是 1em）时，它会在文本顶部创建一个小 space 而不是居中。可怕的颜色是在文本顶部显示蓝色 space。有谁知道如何解决这一问题？我已经尝试添加 text-align: center; vertical-align: middle; 父级 div（蓝色）以 flex 居中元素：display: flex; align-items: center;

非常感谢编辑：这是一个片段，我不知何故找不到如何 link 文件（svg）？

a {
  text-decoration: none;
}


/*Parent div*/

.parent {
  width: 20vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1vw;
  background-color:skyblue;
}


/*Svg*/

.parent img {
  width: auto;
  height: 3vh;
  margin-right: 10px;
  background-color: rosybrown;
}


/*Text*/

span {
  font-size: 0.8em;
  background-color: seagreen;
}

<div class="parent">
  <div>
    <a href="#"><img src="https://cdn0.iconfinder.com/data/icons/feather/96/heart-512.png"><span>Favoris</span></a>
  </div>
</div>

Answer 1

我会尝试将文本元素的行高设置为与您的字体大小相同的值。我也不会为文本元素定义高度（我不确定你是否这样做，因为你没有提供你的代码）。

诸如此类：

div.container {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #4169E1;
}

div.container img {
  width: 40px;
  height: 40px;
  margin-right: 20px;
  background-color: #BC8F8F;
}

div.container span {
  font-size: 20px;
  line-height: 20px;
  color: #4B565C;
  background-color: #2E8B57;
}

<div class="container">
  <img src="https://cdn0.iconfinder.com/data/icons/feather/96/heart-512.png"/>
  <span>Favoris</span>
</div>

Answer 2

发现问题：

<a href="#">
    <div class="parent">
        <img src="img/coeur.svg">
        <span>Favoris</span>
    </div>
</a>

我只需要反转 <a> 标签和 <div>，一切都很好地居中。

CSS 防止较小的字体不居中

CSS prevent smaller font sizes from not centering

html

css

center

font-size

flexbox