如何垂直对齐到x高度？答案

【问题标题】：How to vertical-align to x-height?如何垂直对齐到x高度？
【发布时间】：2011-05-02 15:22:38
【问题描述】：

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

vertical-align: middle;

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

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

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

【问题讨论】：

【解决方案1】：

这里是垂直对齐中心。

或使用图片作为背景图片

background:url(bg_image.jpg) 不重复左居中；

【讨论】：

【解决方案2】：

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

我最喜欢的解决方案是将图像显示为background-image，并将其background-position 设置为left center ...您可以根据口味调味。

【讨论】：

【解决方案3】：

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

【讨论】：