CSS：垂直对齐文本行中的内联块元素

我在一行文本中放置了一个内联块元素：

.icon

元素具有

垂直对齐：中间，这将导致此图片：


正如您所看到的，图标没有与文本的中间对齐，它稍微低一点，而文本对齐看起来还行。
.button content
的
行高
等于父级的高度。我尝试将文本元素环绕图标：


得到了这个结果：


硬币相对于文字上升了一点，而整条线下降了一两个像素

在文本对齐中对齐内联块元素的正确方法是什么？这些文本块是什么？它们的行为如何？他们是否有
display:inline或其他，因为我在DevTools中看不到它们的属性？
图标实际上是垂直对齐的，但与完整的行高有关，包括基线下为y、g、p等字符的后代保留的空间。（还有按钮文本中的y）
您可以尝试添加
位置：相对和
底部：3px（尝试不同的值）以将其向上移动。
该图标实际上是垂直对齐的，但与完整的行高有关，包括基线下方为y、g、p等字符的后代保留的空间。（还有按钮文本中的y）
您可以尝试添加
位置：相对和
底部：3px（尝试不同的值）到该内联块以将其向上移动。
垂直对齐的工作方式与您想象的不一样。它在HTML表中使用，但在DIV中不起作用。这是一段时间的痛苦。幸运的是，现在使用flexbox可以轻松实现这一点

要实现这一点，请将两位副本包装在单个
span
元素中，使您的结构如下所示：

<div class="button-content">
    <span>buy for</span>
    <div class="icon"></div>
    <span>1000</span>
</div>

或者，如果您不能支持
flexbox
，则可以将
按钮内容设置为
显示：表格单元格和
垂直对齐：中间应该可以工作

我强烈推荐flexbox。
垂直对齐不像您想象的那样工作。它在HTML表中使用，但在DIV中不起作用。这是一段时间的痛苦。幸运的是，现在使用flexbox可以轻松实现这一点

要实现这一点，请将两位副本包装在单个
span
元素中，使您的结构如下所示：

<div class="button-content">
    <span>buy for</span>
    <div class="icon"></div>
    <span>1000</span>
</div>

或者，如果您不能支持
flexbox
，则可以将
按钮内容设置为
显示：表格单元格和
垂直对齐：中间应该可以工作

我强烈推荐flexbox。
除非对span元素进行了样式设置，否则无论是否使用它们，结果都是相同的

与
垂直对齐：中间；位置：相对位置；顶部：-1px你可以得到一些不错的结果


。图标{
显示：内联块；
宽度：10px；
高度：10px；
背景：蓝色
}
.顶{
垂直对齐：顶部；
}
.底部{
垂直对齐：底部对齐；
}
.中{
垂直对齐：中间对齐；
}
.上移{
位置：相对位置；
顶部：-1px；
}

购买
1000
购买
1000

购买
1000垂直对齐：顶部；
购买
1000垂直对齐：底部；
购买
1000垂直对齐：中间对齐；

购买
1000垂直对齐：中间对齐；顶部：-1px；
除非对span元素进行了样式设置，否则无论是否使用span元素，结果都是相同的

与
垂直对齐：中间；位置：相对位置；顶部：-1px你可以得到一些不错的结果


。图标{
显示：内联块；
宽度：10px；
高度：10px；
背景：蓝色
}
.顶{
垂直对齐：顶部；
}
.底部{
垂直对齐：底部对齐；
}
.中{
垂直对齐：中间对齐；
}
.上移{
位置：相对位置；
顶部：-1px；
}

购买
1000
购买
1000

购买
1000垂直对齐：顶部；
购买
1000垂直对齐：底部；
购买
1000垂直对齐：中间对齐；

购买
1000垂直对齐：中间对齐；顶部：-1px；
简单答案
我还没有看到一个简单的答案，所以我将发布我的：

.icon_tpye-gold {
  vertical-align: -5px; /* << or another value to center the inline element vertically */
}

.icon\u tpye-gold{
垂直对齐：-5px；/*简单答案
我还没有看到一个简单的答案，所以我将发布我的：

.icon_tpye-gold {
  vertical-align: -5px; /* << or another value to center the inline element vertically */
}

.icon\u tpye-gold{
垂直对齐：-5px；/*
垂直对齐
适用于伪元素
:after
或
:before
，
跨距
，
divs
，
表格
，
任何内容。仅当元素大于可用空间（受父元素的高度/宽度+填充限制）时，垂直对齐不起作用。如果元素大于
vertical align
则无法像我们预期的那样工作。不过，我不建议经常使用FlexBox。较旧的移动设备和浏览器不支持它。不幸的是，许多人正在使用这些较旧的设备/浏览器。
vertical align
可以与伪元素配合使用
：after
或
：在
之前，
跨度
，
分区
，
表格
，
任何内容
。仅当元素大于可用空间（受父元素的高度/宽度+填充限制）时，此功能才起作用。如果元素大于
垂直对齐
则不能像我们预期的那样工作。尽管如此，我还是不建议经常使用FlexBox。较旧的移动设备和浏览器不支持它。不幸的是，很多人都在使用这些较旧的设备/浏览器。我可以理解这种对齐逻辑，但我不明白为什么会这样当我在内联块元素中包装文本时会发生更改。我可以理解这种对齐逻辑，但我不明白为什么在内联块元素中包装文本时会发生更改。@Cubius感谢您共享此内容！甚至不知道此网站！@Cubius感谢您的支持