Ошибка выравнивания текста с изображением в контейнере

Question

У меня есть небольшое изображение перед некоторым текстом в контейнере. Изображение немного выше текста, у меня возникают проблемы с выравниванием текста с изображением. Изображение центрировано по вертикали, но текст немного ниже. Любая помощь будет замечательной!

HTML:

<div class ="additional-container" data-equal="div"> 
    <a href="<?php the_permalink(); ?>" class="additional" style="background-image:url('<?=$url?>');"> 
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/rollup.png" /> 
    <span><?php the_title(); ?></span> 
    </a> 
</div> 

CSS:

.pagecontent .cols .col.one .additional-container { 
    width: 100%; 
    height: auto; 
    margin-bottom: 1.5%; 
} 

.pagecontent .cols .col.one .additional-container a { 
    text-decoration: none; 
    color: white; 
    padding: 15px; 
    box-shadow: inset 0 0 0 350px rgba(86, 159, 223, .9); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center top; 
    width: 50%; 
    display: inline-block; 
} 

.pagecontent .cols .col.one .additional span { 
    padding: 15px; 
} 

.pagecontent .cols .col.one .additional img { 
    padding-top: 6px; 
    display: inline-block; 
} 

Answer 1

Попробуйте это:

.pagecontent .cols .col.one .additional span, 
.pagecontent .cols .col.one .additional img { 
    display: inline-block; 
    vertical-align: middle; 
}