为什么内联块元素未对齐? [英] Why are inline block elements misaligned?
问题描述
在带有vertical-align: top;的div里面，我有两个元素，一个img和一个span(里面有aaa).
Inside a div with vertical-align: top; I have two elements, an img and a span (with aaa inside).
两个元素都设置了display: inline-block;和width和height.
Both elements have display: inline-block; and width and height set.
无论我做什么和尝试什么，这些元素都会被错误，如下图所示. 有什么问题，我该如何解决?
No matter what I do and what I try, the elements are MISALIGNED as shown on picture below. What is wrong and how can I fix this?
此问题发生在每个浏览器中-FF，IE，Safari ... http://jsfiddle.net/CaU59/
This problem occurs in every browser - FF, IE, Safari ... http://jsfiddle.net/CaU59/
推荐答案
您需要将vertical-align添加到元素本身，而不是它们的容器.正如您从与图像对齐的文本中看到的那样，它们当前已对齐baseline.
You need to add vertical-align to the elements themselves, not their container. They are currently aligned baseline as you can see from the text lining up with the image.
这篇关于为什么内联块元素未对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
