Css 垂直对齐偏移不正确：图像上的中间

我有一个问题，正确垂直对齐我的图像。我有高度和线条高度为40px的

div

容器。内部有另一个

div

包含2个

img

和一个

span

。图像的高度设置为30px，因此图像被缩小

img

的垂直对齐属性设置为中间。然而，在Firefox和Chrome中，生成的偏移量在顶部为8px，在底部为2px。如果我将垂直对齐属性设置为

top

或

baseline

图像位于上边缘，将其设置为

bottom

会将图像移动到底部（没有任何间距）

我试图找到一种方法来正确地对齐它们，而不需要额外的标记，但我似乎找不到任何东西。我也尝试了这个解决方案，但没有成功

我创建了一个JSFIDLE来说明这个问题：

希望你能帮忙！谢谢

CSS：

#test  {
    position:relative;
    width: 980px;
    margin: 20px auto 10px auto;
    padding:0;
    position: relative;
    background: #7B0000;
    border:solid 1px blue;
}

#test .section { 
    display:block;
    position:relative;
    padding:10px 0;
    margin:0;
}
#test .section:last-child { float: none; }
#test .section:first-of-type { padding-left: 180px; }
#test img { padding:0; margin:0; display:inline-block; height:30px; vertical-align: middle; position:relative; top:50%; }
#test .section span {position:relative; left:3px; top:50%; display: inline-block;} }

---

我的

我会使用“vs”

span

将高度扩展到100%，并使图像与中间对齐。此外，我不会尝试将两个父容器都对齐到所需的高度，而是仅将其中一个对齐，以避免额外的

填充

或

边距

冲突。看看这个演示：

好的，谢谢你们的帮助。我想出来了。问题是

行高度

属性。给出父容器

#test

或内部

部分
a
行高
导致计算错误。如果我将
行高度
指定给
span
，则一切看起来都很好
 你试过这个方法吗谢谢，但我更愿意使用另一种解决方案，因为在div中可能没有dom节点的文本。我认为使用行高和垂直对齐：中间应该可以做到这一点。我可能错了，但我想你要做的是…确保资产在其父元素中垂直对齐，如果是这样的话，然后，定位、填充和边距设置都是用于对齐容器中的子项（尤其是图像）的良好规范。即使将文本放入父元素中，也最好使用某种元素（例如p标记）来包装该文本。在这两种情况下，管理对象对齐和物理位置（相对于其父容器）是规范的，包括定位、填充和边距。你在这里有很大的灵活性。对不起，我可能造成了一些混乱。在我的父级
#test
中，应该调整不止一个
.section
元素的大小。我试图利用你的一些想法，但没有成功。仅供参考，如果我没有明确设置
.section
高度
属性，
.section
的高度为
43px
，这似乎也是
垂直对齐
计算的基础，即使设置了另一个
宽度
和
行高
。无论如何，我无法理解为什么它是
43px
，检查员无法提供该信息；-）我认为我的建议没有你提到的任何局限性。使用多个
.section
容器查看此演示。您只需将
.section
的样式转换为
#test
。演示：