[英]CSS vertical text alignment
I have a div, which contains an image and a span. 我有一个div,其中包含图像和跨度。 I would like the text in the span to be middle-aligned with the image.
我希望跨度中的文本与图像中间对齐。 Naturally, I made a fiddle for your convenience.
当然,为了方便起见,我做了一个小提琴 。
Here is the HTML: 这是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;}
seems to do nothing. span {vertical-align:middle;}
似乎什么都不做。 span {vertical-align:top;}
aligns the text to the top of the image. span {vertical-align:top;}
将文本对齐到图像的顶部。 You would think that if top
works, so would middle
. top
工作, 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. span {vertical-align:20px;}
给了我想要的东西,但它取决于div高度,图像高度和字体大小(并与之交互)。 display:table-cell
has been suggested elsewhere on SO, but seems to do nothing in Chrome. display:table-cell
已在其他地方建议使用display:table-cell
,但在Chrome中似乎无能为力。 You can see the problem in context at my Fate Dice Roller . 你可以在我的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.
我想要一个不需要在我改变字体大小时进行调整的解决方案。
Here you go: http://jsfiddle.net/nYbwf/3/ 你去: http : //jsfiddle.net/nYbwf/3/
Just vertical-align: middle
on the image element, that way it will align vertically right in the middle instead of baseline. 只是
vertical-align: middle
在图像元素的vertical-align: middle
,这样它将在中间垂直对齐而不是基线。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.