將文本與容器中的圖像對齊

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; 
}