时间戳

首页 > 解决方案 > CSS防止较小的字体大小不居中

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

问题描述

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

在此处输入图像描述

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

标签： htmlcssflexboxcenterfont-size

解决方案

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

所以类似的东西：

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>

推荐阅读