如何垂直对齐x高度？
我有一行文本和一个小图像，我试图在行内垂直对齐。我的目标是将图像的垂直中心与文本基线的 x 高度（或大写字母高度的一半）对齐。我想不出任何方法来做到这一点。我所知道的最接近的事情是：
vertical-align: middle;
CSS 2.1 规范中所述的这种行为：
将框的垂直中点与父框的基线加上父框 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;
This behavior as it is stated in the CSS 2.1 spec:
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent
If there were a way to remove the world "half" from that definition, I'd have what I want. How do I accomplish this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
问题是，文本位于文本基线上，而图像则下降到文本基线以下。不同的浏览器对此的处理方式也不同。
我最喜欢的解决方案是将图像显示为
背景图像，并将其背景位置设置为左中心...您可以调整品尝。The problem is, text sits on the text baseline while the image descends below that. And different browsers handle that differently.
My favorite solution is to display the image as a
background-image, with itsbackground-positionset toleft center... you can season to taste.不知道这是否是“最佳”答案，但我总是会设置文本的“行高”以匹配我试图将其居中的高度。
Don't know if it's the "best" answer, but I would always set the "line-height" of my text to match the height of what I'm trying to center it in.
这是垂直对齐中心。
http://www.templatespoint.com/blog/2010/ 10/div-vertical-align-middle/
或者使用image作为背景图片
background:url(bg_image.jpg) no-repeat left center;
Here is the vertical align center.
http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/
or use image as background image
background:url(bg_image.jpg) no-repeat left center;