拆下跨距。将图像设置为a元素的背景。使用text-align:center;并为图像添加左填充：

.leave-comment {
    background: #010101;
    clear: both;
    font-size: 1.4em;
    padding: 20px 0;
    text-align:center;
}

.leave-comment a {
    background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
}

<div class="leave-comment">
    <a href="example-video-8/" rel="bookmark" title="Leave a comment for Example Video 8">Leave a comment for Example Video 8!</a>
</div>

检查一下：
http://jsfiddle.net/C9HKr/

从您的评论中，我将省略float: left并添加text-align: center
JSFiddle
垂直居中似乎有点困难。如果你想垂直居中并且有固定的高度，你可以将链接的line-height设置为相同的高度。
参见JSFiddle
有一个关于Vertical Centering With CSS垂直居中的教程，解释了几种方法，并强调了每种方法的优缺点。

• 更新 *：

我刚刚重读了你的评论。也许我误会你了如果你只是想让链接向上或向下移动一点，你也可以在顶部和底部使用不同的填充。
看到这个JSFiddle

.leave-comment {
background-color: #010101;
 clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align: center;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
margin-right: 10px;
position: relative;
top: 7px;
}

你现在需要跨度。
http://jsfiddle.net/CeZLy/7/在行动

在你的文字和图像定义的利润率像波纹管，在我的情况下，我使用的img流体的bootstrap recomendation的响应

.img-fluid {
        margin: 0% 0% 0% auto;
    }
    
    .banner-title {
        margin: 0% auto 0% 0%;
    }

<div class="container-fluid bg-banner flex">
        <img src="img/ba.png" class="img-fluid" alt="">
        <div class="banner-title">
            <h1 class="banner-title main-text text-center">
                    <a href="{% url 'vacancies:send_vacancy' %}" class="title-link border rounded
                    text-white p-1 shadow rounded">Connect</a> 
                    with Opportunities