为什么这些元素不垂直对齐？

Question

我有以下HTML标记：

<section class="socialBar">
    <div style="width: 50%; height: 100%; border-right: 1px solid black;">
        <img src="dislike_32.jpg" alt="Dislike">
        <span>1</span>
    </div>
    <div style="width: 50%; height: 100%;">
        <img src="like_32.jpg" alt="Like">
        <span>2</span>
    </div>
</section>

以下CSS：

section.socialBar > div{
    margin: 0px;
    padding: 0px;
    display: inline-block;
    text-align: center;
}
section.socialBar > div > *{
    position: relative; 
    top: 50%;
    transform: translateY(-50%);
}

所以基本上，我有一个section，其中有两个divs彼此相邻（使用display: inline-block），每个占section的一半。现在，在他们内部，我们有一个img和一个span。使用我的第二个CSS选择器，图像和跨度应该是垂直居中。但相反，这是我得到的结果：

图像（24px * 24px）似乎正确居中，但两个span元素却没有。这有什么问题？

Answer 1

问题是span标记是内联元素，因此无法居中。我只是将display: inline-block添加到img和span标记中，并且效果非常好。