Html 将图标与文本大小对齐

我试图在文本旁边的图标中显示图像。它位于文本的稍下方，我希望它至少与文本高度相同，即垂直对齐到中间

.text{
字体系列：“Roboto”，无衬线；
字体大小：20px；
显示：内联块；
边际上限：0；
页边距底部：0；
线高：正常；
颜色：黑色；
}
.em图像{
背景图片：url(https://i.imgur.com/r8hkG1o.png);
}
[class^=“em-”]，[class*=“em-”]，.em png{
高度：1米；
宽度：1米；
背景位置：中心；
背景重复：无重复；
背景尺寸：包含；
显示：内联块；
垂直对齐：中间对齐；
}

---

Name

简单地说，尝试找到文本的高度，并使图标的最大高度等于文本的高度

您可以尝试添加以下CSS代码：

[class^="em-"], [class*=" em-"], .em-png {
                                             max-height: 200px;
}

如果图标大于或小于文本高度，请尝试增大或减小图标高度

---

我希望这个答案有帮助

我建议使用垂直对齐：基线，使用'rem'而不是应该有效的'em'

.text{
字体系列：“Roboto”，无衬线；
字体大小：2.5rem；
显示：内联块；
边际上限：0；
页边距底部：0；
线高：正常；
颜色：黑色；
}
.em图像{
背景图片：url(https://i.imgur.com/r8hkG1o.png);
}
[class^=“em-”]，[class*=“em-”]，.em png{
高度：2em；
宽度：2em；
背景位置：中心；
背景重复：无重复；
背景尺寸：包含；
显示：内联块；
垂直对齐：基线；
}

---

Name

我的建议是对类使用

内联flex

。text（而不是内联块）

然后，您可以给图标一个

align self:center

，它应该就是您想要的。您可能需要调整间距，但应该很好

.text {
  display: inline-flex;
}

[class^="em-"] {
  align-self: center; 
}

---

我将使用Flexbox和

而不是

来实现这一点。使用Flexbox方法，您可以将所有项目水平和垂直居中

为什么

？因为它是用于语法内容的通用内联容器，它本身并不表示任何内容

.wrapper{
显示器：flex；
对齐项目：居中；
字体系列：“Roboto”，无衬线；
字体大小：75px；
线高：1；
}
跨度{
边缘：0.25em；
}
.em图像{
背景图片：url(https://i.imgur.com/r8hkG1o.png);
高度：1em；/*更改此值以匹配所需高度*/
宽度：1em；/*更改此值以匹配所需的宽度*/
背景位置：中心；
背景重复：无重复；
背景尺寸：包含；
显示：内联块；
}

名称

我有几点建议：

• 使用“em”，就像你正在做的那样。“rem”将采用根字体大小，如果更改，将打断组件，而“em”将保持图像大小与标签文本成比例
• 使用flexbox。它更短、更清晰、更现代
• 。上方和下方有一些额外的空间。您正在使用的排版，Roboto，占据了垂直空间的大约80%，因此，如果您希望更加精确，这应该反映在css中
• 可选：字体也不是完全居中的，它的下方比上方稍大一些，因此您需要将其更正为2%

最后的准则是：

.text{
字体系列：“Roboto”，无衬线；
字体大小：20px；
显示器：flex；
对齐项目：居中；
}
.em图像{
背景图片：url(https://i.imgur.com/r8hkG1o.png);
}
[class^=“em-”]，[class*=“em-”]，.em png{
高度：.8em；
宽度：.8em；
背景位置：中心；
背景尺寸：包含；
右边距：.25em；
边缘顶部：-.02em；
}

---

名称
垂直对齐：文本顶部
非常接近，因为它与文本的高度不同，不幸的是@j08691