我在容器中的某些文本之前有一个小图像。图像比文字稍高一些,我无法将文字与图像对齐。图像垂直居中,但文字略低。任何帮助将是伟大的!将文本与容器中的图像对齐
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;
}
怎么样定义的line-height给span元素,等于图像高度?也许也可以将填充顶部和填充底部转换为自动填充。可能有帮助。 –