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

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，它有 2 个 div 并排放置(使用 display: inline-block ) 并且每个都占据了 section 的一半。现在，在它们里面，我们有一个 img 和一个 span。使用我的第二个 CSS 选择器，图像和跨度应该垂直居中。但是，这是我得到的结果:

图像(24px * 24px)似乎正确居中，但两个 span 元素不是。这里有什么问题？

Answer 1

问题在于 span 标签是行内元素，因此无法居中。我只是将 display: inline-block 添加到 img 和 span 标签中，并且效果很好。