无法将文本与容器中的图像对齐

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