CSS防止较小的字体大小不居中

Posted 2023-03-29

【中文标题】CSS防止较小的字体大小不居中

【英文标题】：CSS prevent smaller font sizes from not centering

【发布时间】：2021-11-04 05:41:47

【问题描述】：

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

非常感谢 编辑：这是一个 sn-p，我不知何故找不到如何链接文件（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>

【问题讨论】：

请添加复制sn-p

【参考方案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>

【讨论】：

嘿，谢谢你的帮助，我实际上注意到你的回答可能是我的 标签破坏了一切？没有它它也能完美运行，但不幸的是我需要它

【参考方案2】：

发现问题：

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

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