Question

我有一行文字和一张小图片，我试图在线条内垂直对齐。我的目标是将图像的垂直中心与文本基线的x高度（或大写字母高度的一半）对齐。我无法想办法做到这一点。我所知道的最接近的是：

vertical-align: middle;

这种行为正如CSS 2.1规范中所述：

将框的垂直中点与父框的基线加上父框的x高度的一半对齐

如果有办法从该定义中移除世界“一半”，我就会得到我想要的东西。我该如何做到这一点？

Answer 1

问题是，文本位于文本基线上，而图像位于文本基线下方。不同的浏览器处理方式不同。

我最喜欢的解决方案是将图片显示为background-image，将background-position设置为left center ...您可以根据需要进行调整。

Answer 2

不知道这是否是“最佳”答案，但我总是将文字的“行高”设置为与我试图将其居中的高度相匹配。

Answer 3

这是垂直对齐中心。

或使用图像作为背景图像

background：url（bg_image.jpg）no-repeat left center;