CSS垂直文本对齐 [英] CSS vertical text alignment

问题描述

我有一个div，其中包含一个图像和跨度。我想让跨度中的文本与图像中间对齐。当然，为了方便起见，我为了方便起见 小提琴 。

I have a div, which contains an image and a span. I would like the text in the span to be middle-aligned with the image. Naturally, I made a fiddle for your convenience.

以下是HTML：

<div id="legend">
    <img src="http://fate.holmes-cj.com/plus.png"/>
    <span> * 5</span>
</div>

这里有一些我尝试过的东西：

Here are some of the things I've tried:

• span {vertical-align：middle;} 似乎什么也不做。


• span {vertical-align：top;} 将文本对齐到图像顶部。你会认为如果 top 有效，那么 middle 。


• code> span {vertical-align：20px;} 给我想要的，但它取决于div高度，图像高度和字体大小（并与之交互）。


• 已在SO的其他地方推荐添加 display：table-cell ，但似乎在Chrome中无所作为。

• span {vertical-align:middle;} seems to do nothing.
• span {vertical-align:top;} aligns the text to the top of the image. You would think that if top works, so would middle.
• span {vertical-align:20px;} gives me what I want, but it depends upon (and interacts with) the div height, the image height, and the font size.
• adding display:table-cell has been suggested elsewhere on SO, but seems to do nothing in Chrome.

您可以在我的 Fate Dice Roller 。点击滚动几次，然后将鼠标放在直方图上。

You can see the problem in context at my Fate Dice Roller. Click on "roll" a few times, and then mouse over the histogram. You get some neat stats on your dice rolls, but the text portion is misaligned.

我只是运气在这里，或者是垂直对齐真的应该是这个凌乱的？

Am I just out of luck here, or is vertical alignment really supposed to be this messy? I would love a solution that doesn't have to be tweaked when I change the font size.

推荐答案

在这里你可以：

只是 vertical-align：middle 在图像元素上，这样它将在中间垂直对齐而不是基线。

Just vertical-align: middle on the image element, that way it will align vertically right in the middle instead of baseline.

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