Почему эти элементы не располагаются вертикально?

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, который имеет 2 divs, которые размещены рядом друг с другом (используя display: inline-block), и каждый занимает половину section. Теперь, внутри них, у нас есть один img и один span. Изображение и диапазон должны быть с вертикальным центрированием, используя мой второй селектор CSS. Но вместо этого, это результат я получаю:

Изображения (которые 24px * 24px), кажется, правильно по центру, но два span элементы не являются. В чем проблема?

Answer 1

Проблема заключалась в том, что теги span были встроенными элементами и поэтому не могли быть центрированы. Я просто добавил display: inline-block как к тегам img, так и к span, и он отлично работал.