html - 将图标与文字大小对齐

Question

我正在尝试在一段文本旁边的图标中显示图像。它略低于文本，我希望它至少与文本高度相同，也就是垂直对齐到中间。

.text {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    line-height: normal;
    color: black;
}

.em-image{
    background-image: url(https://i.imgur.com/r8hkG1o.png);
}

[class^="em-"], [class*=" em-"], .em-png {
    height: 1em;
    width: 1em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}

<p class="text"><i class="em-image"></i> Name</p>

目前是这样的 而我更喜欢它看起来像这样

有没有办法至少使图像与行高相匹配？图像现在位于底部，但我希望它的全高并与文本垂直对齐，我只是不确定如何去做，是否可以使用包含图像的 span 或 DIV 来完成同样的操作背景代替？

Answer 1

我建议使用 vertical-align:baseline 并使用 'rem' 而不是 'em' 应该可行。

.text {
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    line-height: normal;
    color: black;
}

.em-image{
    background-image: url(https://i.imgur.com/r8hkG1o.png);
}

[class^="em-"], [class*=" em-"], .em-png {
    height: 2rem;
    width: 2rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: baseline;
}

<p class="text"><i class="em-image"></i> Name</p>