如何垂直对齐到 x 高度? [英] How to vertical-align to x-height?

问题描述

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

I have a line of text and a small image, which I am trying to align vertically within the line. My goal is to align the vertical center of the image with the x-height (or half of the height of a capital letter) from the baseline of the text. I can't figure out any way to do this. The closest thing that I know of is:

vertical-align: middle;

此行为如 CSS 2.1 规范中所述:

This behavior as it is stated in the CSS 2.1 spec:

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

如果有一种方法可以从该定义中删除世界一半"，我就会得到我想要的.我该如何实现?

If there were a way to remove the world "half" from that definition, I'd have what I want. How do I accomplish this?

推荐答案

问题是，文本位于文本基线上，而图像则低于基线.不同的浏览器对此有不同的处理方式.

The problem is, text sits on the text baseline while the image descends below that. And different browsers handle that differently.

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

My favorite solution is to display the image as a background-image, with its background-position set to left center ... you can season to taste.

这篇关于如何垂直对齐到 x 高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！