将图像对齐CSS中的文本

Question

我已经阅读了论坛，但无法找到我的代码出错的地方。所以我试图将圆形箭头图像对齐到文本行的中心。

这就是它在网站上的显示效果：http://prntscr.com/9pqnko

这是我使用的CSS：

.fixedicon2 {
    display: inline-block;
    vertical-align: middle;
    height: 52px;
    width: 430px;
    background-image: url('http://www.brewer2016.brewerdirect.com/wp-content/uploads/2016/01/blue-circle1.png'); 
    background-repeat: no-repeat;
}

这是我在页面上的方式：

<div class="fixedicon2">
<h5 style="text-align: center;"><span style="color: #154060;"><strong>View Brewer360</strong> Case Studies</span></h5>
</div>

谢谢你，斯蒂芬妮

Answer 1

如果你想这样的话

然后参考这个css

.fixedicon2 {
      padding-top: -6px;
    display: inline-block;
    vertical-align: middle;
    height: 55px;
    width: 430px;
    background-image: url('http://www.brewer2016.brewerdirect.com/wp-content/uploads/2016/01/blue-circle1.png');
    background-repeat: no-repeat;
    background-position-y: 6px;    }

和

只需在你的css类中添加 background-position-x：center;

.fixedicon2 {
          padding-top: -6px;
        display: inline-block;
        vertical-align: middle;
        height: 55px;
        width: 430px;
        background-image: url('http://www.brewer2016.brewerdirect.com/wp-content/uploads/2016/01/blue-circle1.png');
        background-repeat: no-repeat;
        background-position-y: 6px; 
       background-position-x: center;
}